.card-li.baidong {
  animation: rotate5 2s;
}
@keyframes rotate5 {
  0% {
    transform: rotate(15deg);
  }
  30% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(8deg);
  }
  70% {
    transform: rotate(-8deg);
  }
  90% {
    transform: rotate(3deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.client-content .card-li i {
  display: block;
  margin: 0 auto 24px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #ccd0dc;
  background: #f4f6f9;
}
.client-content .card-li img {
  width: 30px;
}
.client-content .description .con {
  margin: 72px auto 0;
  width: 1094px;
  background: #fff;
  border-radius: 40px 40px 0 0;
  padding: 58px 0 69px;
}
.client-content .con .con-tit {
  font-size: 28px;
  color: #1f2937;
  letter-spacing: 1px;
}
.client-content .con .con-info {
  margin-top: 25px;
  font-size: 14px;
  color: #4e545d;
}
.client-content .white-bg {
  background-color: #fff;
}
.client-content .funcs {
  width: 1092px;
  margin: 0 auto;
}
.client-content .funcs .pt9 {
  padding-top: 9px;
}
.client-content .funcs .pt115 {
  padding-top: 115px;
}
.client-content .funcs .pt130 {
  padding: 130px 0 55px;
}
.client-content .funcs img {
  width: 570px;
}
.client-content .funcs .fl-con {
  float: left;
  text-align: left;
  width: 466px;
}
.client-content .funcs .fr-con {
  float: right;
  text-align: left;
  width: 466px;
}
.client-content .funcs .func-tit {
  font-size: 26px;
  color: #1f2837;
  letter-spacing: 1px;
  margin-bottom: 30px;
}
.client-content .funcs .explain {
  margin-top: 19px;
  width: 100%;
  height: 72px;
  border-radius: 36px;
  border: 1px solid #dbdcdf;
  padding-left: 65px;
}
.client-content .funcs .iconfont {
  float: left;
  margin-top: 22px;
  margin-left: -38px;
  font-size: 28px;
  color: #9a9ea5;
}
.client-content .funcs .func-info {
  padding-top: 15px;
  font-weight: 600;
  font-size: 16px;
  color: #1f2837;
}
.client-content .funcs .func-desc {
  padding-top: 4px;
  font-size: 14px;
  color: #666e7a;
}
.client-content .logos {
  width: 1200px;
  margin: 0 auto;
}
.client-content .logo-contact {
  padding: 17px 0 68px;
  text-align: center;
  font-size: 14px;
  color: #4e545d;
}
.client-content .logo-contact > a {
  color: #014bf6;
  text-decoration: underline;
}
.client-content .logo-tit {
  padding-top: 50px;
  font-size: 28px;
  color: #000;
  letter-spacing: 1px;
}
.client-content .logo-desc {
  padding: 25px 0 32px;
  font-size: 14px;
  color: #4e545d;
}
.client-content .logos .logo-li {
  float: left;
  margin: 0 28px 25px 0;
  width: 275px;
  height: 121px;
  background: #fff;
  border: 1px solid #e2e5ea;
  border-radius: 10px;
  line-height: 121px;
  font-size: 18px;
  color: #4e545d;
}
.client-content .logos .logo-li:nth-of-type(4n) {
  margin-right: 0;
}
.client-content .logos img {
  height: 68px;
}
.client-content .con-users {
  margin: 0 auto;
  width: 1200px;
  position: relative;
  overflow: hidden;
  padding-bottom: 56px;
}
.client-content .con-users .user-tit {
  padding-top: 48px;
  font-size: 28px;
  color: #1f2837;
  letter-spacing: 1px;
}
.client-content .con-users .user-desc {
  padding: 25px 0 38px;
  line-height: 14px;
  font-size: 14px;
  color: #4e545d;
}
.client-content .con-users .roll-area {
  width: 100%;
  height: 292px;
  padding: 0 20px;
  overflow: hidden;
  position: relative;
}
.client-content .con-users .comments-list {
  width: 100%;
  height: 100%;
  text-align: left;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.client-content .move {
  animation: runToLeft 6s linear infinite;
}
@keyframes runToLeft {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-460px);
  }
}
@-ms-keyframes runToLeft {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-460px);
  }
}
@-webkit-keyframes runToLeft {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-460px);
  }
}
.client-content .con-users .comment-li {
  position: absolute;
  top: 0;
  left: 100%;
  margin-right: 28px;
  display: inline-block;
  width: 360px;
  height: 84px;
  border: 1px solid #d8dcdf;
  background: #fff;
  border-radius: 9px;
  padding: 0 10px 0 80px;
}
.client-content .comment-li .avatar {
  float: left;
  margin: 15px 0 0 -68px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  overflow: hidden;
}
.client-content .comment-li .avatar img {
  width: 100%;
  height: 100%;
}
.client-content .comment-li .uid {
  padding: 20px 0 13px;
  line-height: 14px;
  color: #787878;
}
.client-content .comment-li .text,
.client-content .comment-li .uid {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.client-content .comment-li .text {
  color: #2b333a;
}
.client-content .con-supports {
  padding: 53px 0 45px;
}
.client-content .con-supports .cs-title {
  font-size: 28px;
  color: #000;
  text-align: center;
  letter-spacing: 3px;
}
.client-content .con-supports .cs-desc {
  padding: 20px 0 34px;
  line-height: 14px;
  text-align: center;
  font-size: 14px;
  color: #585858;
}
.client-content .con-supports .supports {
  width: 1200px;
  height: 287px;
}
.client-content .con-supports .cs-contact {
  margin: 48px 0 20px;
  text-align: center;
  font-size: 14px;
  color: #53585e;
}
.client-content .con-supports .btn-apply {
  display: block;
  margin: 0 auto;
  width: 80px;
  height: 24px;
  background: #fff;
  border: 1px solid #0050fa;
  border-radius: 12px;
  font-size: 12px;
  color: #0050fa;
  line-height: 22px;
  text-align: center;
}
.client-content .con-supports .btn-apply:hover {
  background-color: #0050fa;
  color: #fff;
}
.client-content .con-supports .s-objs {
  text-align: center;
  width: 1220px;
  margin: 0 auto;
}
.client-content .con-supports .so-li {
  vertical-align: bottom;
  display: inline-block;
  height: 185px;
  margin-right: 40px;
  position: relative;
  text-align: center;
}
.client-content .con-supports .so-li:last-of-type {
  margin-right: 0;
}
.client-content .con-supports .support-icon {
  display: block;
  margin: 0 auto;
  width: 95px;
  height: 95px;
  background: url(https://pic.51ifonts.com/images/client-index/supports.png)
    no-repeat;
  background-size: auto 95px;
}
.client-content .con-supports .support-icon.ai {
  background-position-x: -142px;
}
.client-content .con-supports .support-icon.cl {
  background-position-x: -285px;
}
.client-content .con-supports .support-icon.skt {
  background-position-x: -427px;
}
.client-content .con-supports .support-icon.kn {
  background-position-x: -570px;
}
.client-content .con-supports .support-icon.ae {
  background-position-x: -711px;
  width: 96px;
}
.client-content .con-supports .support-icon.wd {
  background-position-x: -854px;
}
.client-content .con-supports .support-icon.ppt {
  background-position-x: -996px;
}
.client-content .con-supports .support-icon.id {
  background-position-x: -1138px;
  width: 96px;
}
.client-content .con-supports .sl-name {
  font-size: 16px;
  color: #434343;
  line-height: 1em;
  padding: 30px 0 10px;
}
.client-content .con-supports .sl-desc {
  font-size: 12px;
  color: #434343;
  max-width: 86px;
}
.client-content .slogen {
  padding: 80px 0 45px;
  font-size: 26px;
  color: #1f2837;
}
.client-content .btns {
  width: 658px;
  margin: 0 auto;
}
.client-content .btns .version {
  padding: 12px 0 50px;
  font-size: 14px;
  color: #666e7a;
}
.client-content .win-download {
  width: 290px;
  height: 69px;
  background: linear-gradient(90deg, #0032f7, #0085fe);
  border-radius: 34px;
  text-align: center;
  line-height: 69px;
  font-size: 18px;
  color: #fff;
  transition: 0.3s;
  cursor: pointer;
}
.client-content .win-download:hover {
  background: linear-gradient(270deg, #0032f7, #0085fe);
}
.client-content .win-download i {
  margin-right: 12px;
  font-size: 44px;
  vertical-align: middle;
}
.client-content .mac-download {
  width: 290px;
  height: 69px;
  background: linear-gradient(90deg, #aafce2, #d0fdec);
  border-radius: 34px;
  text-align: center;
  line-height: 69px;
  font-size: 18px;
  color: #1f2837;
  transition: 0.3s;
  cursor: pointer;
}
.client-content .mac-download:hover {
  background: linear-gradient(270deg, #aafce2, #d0fdec);
}
.client-content .mac-download i {
  margin-right: 10px;
  font-size: 48px;
  vertical-align: middle;
}
.page-clientdown-pop .common-pop {
  position: relative;
}
.page-clientdown-pop .common-pop .btn-close {
  position: absolute;
  top: 18px;
  right: 18px;
  cursor: pointer;
  transition: 0.3s;
}
.page-clientdown-pop .common-pop .btn-close:hover {
  transform: rotate(180deg);
}
.page-clientdown-pop .common-pop .btn-close i {
  font-size: 14px;
  color: #000;
}
.page-clientdown-pop .invited-pop {
  width: 574px;
  padding: 40px 0 48px;
  text-align: center;
}
.page-clientdown-pop .invited-pop.old {
  width: 382px;
  padding: 50px 0 38px;
}
.page-clientdown-pop .invited-pop.old .title {
  font-size: 22px;
}
.page-clientdown-pop .invited-pop .title {
  font-size: 26px;
  color: #202937;
  letter-spacing: 1px;
  font-weight: 600;
}
.page-clientdown-pop .invited-pop .title b {
  color: #ee663f;
}
.page-clientdown-pop .invited-pop .title > img {
  width: 97px;
}
.page-clientdown-pop .invited-pop .info {
  margin-top: 4px;
  font-size: 20px;
  color: #535d71;
}
.page-clientdown-pop .invited-pop .desc {
  margin: 23px 0 50px;
  font-size: 16px;
  color: #202937;
}
.page-clientdown-pop .invited-pop .desc span {
  color: #ee663f;
}
.page-clientdown-pop .invited-pop .btn-down {
  display: block;
  margin: 0 auto;
  width: 266px;
  height: 52px;
  background: #2f5ded;
  border-radius: 6px;
  text-align: center;
  line-height: 52px;
  font-size: 16px;
  color: #fff;
}
.is-download-pop {
  position: fixed;
  top: 280px;
  left: 50%;
  margin-left: -237.5px;
  z-index: 1000;
  width: 475px;
  height: 220px;
}
.is-download-pop .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 35px;
  cursor: pointer;
}
.is-download-pop img {
  width: 100%;
}
.is-download-pop .btn-reset {
  position: absolute;
  bottom: 12px;
  right: 15px;
  width: 78px;
  height: 28px;
  cursor: pointer;
}
.course-content {
  background: #f6f8fa;
  padding-bottom: 80px;
}
.course-content .banner {
  width: 100%;
  height: 322px;
  background: url(https://pic.51ifonts.com/images/course/new-banner.jpg)
    no-repeat 50%;
  background-size: auto 100%;
}
.course-content .classify-box {
  margin-top: -102px;
  background: #fff;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  padding: 38px 32px;
}
.course-content .classify-box .classify-li {
  display: inline-block;
  width: 207px;
  height: 116px;
  background: #f6f8fa;
  border-radius: 4px;
  text-align: center;
  padding-top: 20px;
  cursor: pointer;
  transition: 0.3s;
}
.course-content .classify-box .classify-li.on:nth-of-type(3n + 1),
.course-content .classify-box .classify-li:hover:nth-of-type(3n + 1) {
  background: #fd805c;
}
.course-content .classify-box .classify-li.on:nth-of-type(3n + 2),
.course-content .classify-box .classify-li:hover:nth-of-type(3n + 2) {
  background: #5ec76a;
}
.course-content .classify-box .classify-li.on:nth-of-type(3n + 3),
.course-content .classify-box .classify-li:hover:nth-of-type(3n + 3) {
  background: #3668e8;
}
.course-content .classify-box .classify-li:hover {
  box-shadow: 0 0 9px 0 hsla(0, 0%, 81.6%, 0.6);
  transform: translateY(-5px);
}
.course-content .classify-li .iconfont {
  font-size: 40px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.course-content .classify-li:nth-of-type(3n + 1) .iconfont {
  background-image: linear-gradient(0deg, #fd805c, #ffa262);
}
.course-content .classify-li:nth-of-type(3n + 2) .iconfont {
  background-image: linear-gradient(0deg, #5ec76a, #68d975);
}
.course-content .classify-li:nth-of-type(3n + 3) .iconfont {
  background-image: linear-gradient(0deg, #3668e8, #3b74f0);
}
.course-content .classify-li.on .iconfont,
.course-content .classify-li:hover .iconfont {
  -webkit-text-fill-color: #fff;
}
.course-content .classify-li .classify-name {
  margin-top: 18px;
  font-size: 16px;
  color: #303030;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.course-content .classify-li.on .classify-name,
.course-content .classify-li:hover .classify-name {
  color: #fff;
}
.course-content .video-box {
  margin-top: 34px;
  background: #fff;
  border-radius: 6px;
  padding: 35px 0 54px 36px;
}
.course-content .video-box .subtitle {
  line-height: 18px;
  font-size: 18px;
  color: #303030;
  border-left: 3px solid #265eef;
  padding-left: 14px;
  margin-bottom: 32px;
}
.course-content .video-box .subtitle span {
  margin-left: 5px;
  font-weight: 400;
  font-size: 14px;
  color: #7a7a7a;
}
.course-content .video-box .fl-show {
  float: left;
  width: 868px;
  height: 530px;
  position: relative;
  cursor: pointer;
}
.course-content .video-box .fl-show.on:before {
  display: none;
}
.course-content .video-box .fl-show video {
  object-fit: fill;
  height: 100%;
  width: 100%;
}
.course-content .video-box .fl-show.on .iconfont,
.course-content .video-box .fl-show.on .video-poster {
  display: none;
}
.course-content .video-box .fl-show .iconfont {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -32px 0 0 -32px;
  font-size: 64px;
  color: #fff;
  transition: 0.3s;
  pointer-events: none;
  z-index: 3;
}
.course-content .video-box .fl-show:hover .iconfont {
  transform: scale(0.8);
}
.course-content .video-box .fr-list {
  float: left;
  margin-left: 30px;
  width: calc(100% - 898px);
  height: 530px;
  overflow: auto;
}
.course-content .video-box .video-li {
  width: 220px;
  background: #f6f8fa;
  margin-bottom: 18px;
  cursor: pointer;
}
.course-content .video-box .video-li:last-of-type {
  margin-bottom: 0;
}
.course-content .video-li .video-poster {
  width: 100%;
  height: 135px;
  position: relative;
  overflow: hidden;
}
.course-content .video-li .video-poster:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.43;
  transition: 0.3s;
}
.course-content .video-li.on .video-poster:before {
  display: none;
}
.course-content .video-li:hover .video-poster:before {
  opacity: 0.8;
}
.course-content .video-li:hover .iconfont {
  transform: scale(1.2);
  opacity: 1;
}
.course-content .video-poster .iconfont {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -15px 0 0 -15px;
  font-size: 30px;
  color: #fff;
  transition: 0.28s;
  opacity: 0;
}
.course-content .video-poster img {
  width: 100%;
  transition: 0.28s;
}
.course-content .video-li:hover .video-poster img {
  transform: scale(1.1);
}
.course-content .video-li .video-title {
  line-height: 30px;
  padding-left: 12px;
  font-size: 12px;
  color: #272727;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  padding-right: 25px;
}
.course-content .video-li.on .video-title {
  color: #ef3c05;
}
.course-content .video-li .bofang-icon {
  position: absolute;
  top: 9px;
  right: 8px;
  width: 12px;
  height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  display: none;
}
.course-content .video-li.on .bofang-icon {
  display: flex;
}
.course-content .bofang-icon .icon1 {
  height: 8px;
}
.course-content .bofang-icon .icon1,
.course-content .bofang-icon .icon2 {
  display: inline-block;
  width: 2px;
  border-radius: 2px;
  background-image: linear-gradient(0deg, #fd805c, #ffa262);
}
.course-content .bofang-icon .icon2 {
  vertical-align: bottom;
  height: 12px;
}
.course-content .bofang-icon .icon3 {
  display: inline-block;
  width: 2px;
  height: 10px;
  border-radius: 2px;
  background-image: linear-gradient(0deg, #fd805c, #ffa262);
}
.course-content .video-li.on .icon1 {
  animation: longer1 0.8s linear infinite alternate-reverse;
}
.course-content .video-li.on .icon2 {
  animation: longer2 1s linear infinite alternate-reverse;
}
.course-content .video-li.on .icon3 {
  animation: longer3 0.4s linear infinite alternate-reverse;
}
@keyframes longer1 {
  0% {
    height: 4px;
  }
  to {
    height: 12px;
  }
}
@keyframes longer2 {
  0% {
    height: 12px;
  }
  to {
    height: 4px;
  }
}
@keyframes longer3 {
  0% {
    height: 10px;
  }
  to {
    height: 4px;
  }
}
.course-content .video-li .video-title img {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
}
.course-content .video-li.on .video-title img {
  opacity: 1;
}
.course-content .video-box .current-title {
  margin-top: 22px;
  font-size: 14px;
  color: #272727;
  letter-spacing: 0.6px;
}
.course-content .common-pop {
  position: relative;
}
.course-content .common-pop .btn-close {
  position: absolute;
  top: 18px;
  right: 18px;
  cursor: pointer;
  transition: 0.3s;
}
.course-content .common-pop .btn-close:hover {
  transform: rotate(180deg);
}
.course-content .common-pop .btn-close i {
  font-size: 14px;
  color: #000;
}
.course-content .video-limit {
  width: 510px;
  padding: 45px 0;
  text-align: center;
}
.course-content .video-limit > .iconfont {
  font-size: 50px;
  background-image: linear-gradient(0deg, #fd805c, #ffa262);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.course-content .video-limit .info {
  margin-top: 20px;
  font-size: 16px;
  color: #333;
}
.course-content .video-limit .info span {
  color: #f55100;
}
.course-content .video-limit .desc {
  margin-top: 22px;
  font-size: 20px;
  font-weight: bolder;
  color: #333;
}
.course-content .video-limit .btn-download {
  display: block;
  margin: 60px auto 10px;
  width: 232px;
  height: 38px;
  border-radius: 4px;
  background-color: #265eef;
  text-align: center;
  line-height: 38px;
  font-size: 14px;
  color: #fff;
}
.course-content .video-limit .btn-download:hover {
  background: linear-gradient(90deg, #0032f7, #0085fe);
}
.course-content .video-limit .btn-know {
  text-align: center;
  font-size: 12px;
  color: #333;
}
.course-content .video-limit .btn-know:hover {
  color: #265eef;
}
.course-content .video-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
._page-element-list {
  padding-bottom: 100px;
  background-color: #f6f8fa;
}
._page-element-list .category-box {
  background-color: #f6f8fa !important;
  padding-bottom: 26px !important;
}
._page-element-list .category-box .router {
  padding: 20px 0;
  font-size: 12px;
  color: #676e7a;
  letter-spacing: 1px;
}
._page-element-list .category-box .router b {
  color: #345fef !important;
  font-weight: 600 !important;
}
._page-element-list .category-box .router .keywords {
  border: 1px dashed #185bf8;
  padding: 2px 8px;
  position: relative;
  color: #185bf8;
}
._page-element-list .icon-guanbi4 {
  position: absolute;
  color: #185bf8;
  top: -8px;
  right: -9px;
  cursor: pointer;
  background-color: #fff;
}
._page-element-list .search-box {
  width: 954px;
  height: 47px;
  text-align: center;
  margin: 6px auto 0;
}
._page-element-list .select-input {
  width: 112px;
  height: 47px;
  display: inline-block;
}
._page-element-list .input {
  width: 112px;
  height: 47px;
  position: relative;
  cursor: pointer;
}
._page-element-list .input input {
  width: 100%;
  height: 100%;
  padding-left: 20px;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px 0 0 4px;
  border: none;
  border-right: 1px solid #f6f8fa;
}
._page-element-list .input input::-webkit-input-placeholder {
  color: #333;
}
._page-element-list .input input::-moz-placeholder {
  color: #333;
}
._page-element-list .input input:-ms-input-placeholder {
  color: #333;
}
._page-element-list .input input:-moz-placeholder {
  color: #333;
}
._page-element-list .input i {
  width: 8px;
  border: none;
  font-size: 8px;
  position: absolute;
  top: 20px;
  left: 86px;
}
._page-element-list .list {
  width: 112px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 2px 2px 4px 0 rgba(207, 210, 215, 0.39);
  border-radius: 0 0 4px 4px;
}
._page-element-list .list ul li {
  width: 100%;
  height: 45px;
  cursor: pointer;
  line-height: 45px;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}
._page-element-list .list ul li:hover {
  background: rgba(38, 85, 240, 0.1);
  color: #345fef;
}
._page-element-list .recommend {
  background-color: #fff;
  padding: 28px 0;
}
._page-element-list .recommend-list {
  width: 1200px;
  margin: 0 auto;
}
._page-element-list .recommend h1 {
  font-size: 14px;
  font-weight: 500;
  color: #878789;
  line-height: 20px;
}
._page-element-list .recommend .flex-aggregate {
  display: flex;
  margin-top: 18px;
}
._page-element-list .recommend .flex-aggregate .item-aggregate {
  width: 281px;
  height: 156px;
  cursor: pointer;
  position: relative;
  margin-right: 25px;
  border-radius: 4px;
  background-color: #f6f8fa;
  overflow: hidden;
  text-align: center;
}
._page-element-list .recommend .flex-aggregate .item-aggregate:last-child {
  margin-right: 0;
}
._page-element-list .flex-aggregate .item-aggregate .item-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.31));
  border-radius: 4px;
}
._page-element-list
  .recommend
  .flex-aggregate
  .item-aggregate:hover
  .hover-mask {
  opacity: 1;
}
._page-element-list .recommend .flex-aggregate .item-aggregate:hover p {
  top: 160px;
}
._page-element-list .flex-aggregate .item-aggregate .hover-mask {
  border-radius: 4px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  background-color: rgba(14, 22, 32, 0.4);
  opacity: 0;
  transition: all 0.4s;
}
._page-element-list .flex-aggregate .item-aggregate .hover-mask span {
  font-size: 20px;
  color: #fff;
  display: block;
  margin: 0 auto;
  position: relative;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
}
._page-element-list .flex-aggregate .item-aggregate img {
  height: 100%;
  border-radius: 4px;
}
._page-element-list .flex-aggregate .item-aggregate p {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  line-height: 20px;
  text-align: center;
  position: absolute;
  top: 127px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.4s;
}
._page-element-list .filtrate.down {
  margin-top: 6px;
}
._page-element-list .content {
  background: #f6f8fa;
  width: 1200px;
  margin: 21px auto 0;
}
._page-element-list .classify-tit {
  font-size: 14px;
  color: #9ba3ab;
  float: left;
  width: 43px;
  text-align: left;
  line-height: 20px;
}
._page-element-list .more-classify {
  height: 20px;
  padding: 0 7px;
  float: right;
  cursor: pointer;
  position: relative;
  line-height: 25px;
}
._page-element-list .more-classify p {
  font-size: 14px;
  color: #333;
  display: inline-block;
  line-height: 20px;
  margin-right: 4px;
}
._page-element-list .more-classify .iconfont {
  width: 12px;
  height: 12px;
  font-size: 12px;
  line-height: 14px;
}
._page-element-list .more-classify .icon-up-fill {
  position: absolute;
  top: 0;
}
._page-element-list .more-classify:hover {
  color: #185bf8;
  background-color: #f0f6ff;
  border-radius: 4px;
}
._page-element-list .more-classify:hover p {
  color: #185bf8;
}
._page-element-list .classify-li {
  font-size: 14px;
  color: #333;
  display: inline-block;
  margin-right: 10px;
  padding: 0 12px;
  line-height: 25px;
  border-radius: 4px;
}
._page-element-list .classify-li.on,
._page-element-list .classify-li:hover {
  color: #fff;
  background-color: #185bf8;
}
._page-element-list .block-list {
  margin-top: 24px;
}
._page-element-list .empty-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  line-height: 20px;
}
._page-element-list .page-box {
  margin-top: 46px;
  display: flex;
  justify-content: center;
}
._page-element-list .drop-down {
  position: absolute;
  width: 734px;
  background-color: #fff;
  padding: 12px 0 15px;
  margin-left: 112px;
  box-shadow: 2px 2px 4px 0 rgba(207, 210, 215, 0.39);
  border-radius: 0 0 4px 4px;
  z-index: 99;
  margin-top: 2px;
}
._page-element-list .drop-down li {
  width: 100%;
  height: 31px;
  text-align: left;
  padding: 6px 21px;
}
._page-element-list .drop-down li:not(:first-child):hover {
  background-color: #eff6ff;
  cursor: pointer;
}
._page-element-list .drop-down li span {
  color: #8493a7;
  font-size: 12px;
  line-height: 17px;
}
._page-element-list .drop-down li .history {
  margin-right: 18px;
}
._page-element-list .drop-down li .history:hover {
  cursor: pointer;
  color: #185bf8;
}
._page-element-list .drop-down li .index {
  display: inline-block;
  width: 16px;
  height: 16px;
  text-align: center;
  line-height: 16px;
  color: #fff;
  background: #7a8596;
  border-radius: 2px;
  margin-right: 10px;
  font-size: 12px;
}
._page-element-list .drop-down li:not(:first-child):nth-child(-n + 4) .index {
  background: linear-gradient(133deg, #f0a362, #ed6f4f);
}
._page-element-list .drop-down li .keyword {
  font-size: 14px;
}
._page-element-list .drop-down li:not(:first-child):nth-child(-n + 4) .keyword {
  color: #202937;
}
._page-element-list .drop-down li .result {
  font-size: 14px;
  float: right;
  color: #99a3ac;
}
._page-element-list .search-btn {
  width: 106px;
  height: 47px;
  background: #265eef;
  border-radius: 0 4px 4px 0;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: top;
}
._page-element-list .search-btn .icon-search {
  font-size: 16px;
  margin-right: 3px;
}
._page-element-list .search-btn:hover {
  background: linear-gradient(90deg, #0032f7, #0085fe);
}
.hot-keyword {
  margin-top: 30px;
}
.hot-keyword > a {
  margin: 0 12px;
  line-height: 32px;
  cursor: pointer;
}
._page-element-detail--scroll-bar {
  width: 100%;
  height: 70px;
  position: fixed;
  top: 0;
  background-color: #fff;
  z-index: 999;
  box-shadow: 0 2px 8px 0 rgba(211, 220, 222, 0.43);
}
._page-element-detail--scroll-bar .scroll-ayout {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
}
._page-element-detail--scroll-bar .brand,
._page-element-detail .brand {
  font-size: 12px !important;
  width: 20px !important;
  height: 20px !important;
  background: linear-gradient(318deg, #3a7fff, #275af0) !important;
  border-radius: 4px !important;
  color: #fff !important;
  line-height: 20px !important;
  text-align: center !important;
  display: inline-block !important;
  margin: 25px 16px 0 0 !important;
  position: unset !important;
}
._page-element-detail .brand {
  margin: 0 8px !important;
  vertical-align: -5px !important;
}
._page-element-detail--scroll-bar p {
  font-size: 18px;
  font-weight: 500;
  color: #202937;
  line-height: 70px;
  display: inline-block;
  vertical-align: top;
}
._page-element-detail--scroll-bar .btn-group {
  float: right;
  margin-top: 17px;
}
._page-element-detail--scroll-bar .btn.lt,
._page-element-detail .btn.lt {
  margin-right: 29px;
  color: #345fef;
}
._page-element-detail--scroll-bar .btn.lt:hover,
._page-element-detail .btn.lt:hover {
  color: #fff;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  border-color: transparent;
}
._page-element-detail--scroll-bar .btn.rt,
._page-element-detail .btn.rt {
  color: #24b35f;
}
._page-element-detail--scroll-bar .btn.rt:hover,
._page-element-detail .btn.rt:hover {
  color: #fff;
  background: linear-gradient(90deg, #00b269, #40ca79);
  border-color: transparent;
}
._page-element-detail--scroll-bar .btn,
._page-element-detail .btn {
  display: inline-block;
  cursor: pointer;
  width: 122px;
  height: 40px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #dbdfe4;
}
._page-element-detail--scroll-bar .btn .text,
._page-element-detail .btn .text {
  margin-left: 5px;
  text-align: center;
  line-height: 40px;
  font-weight: 500;
}
._page-element-detail {
  width: 100%;
  height: 100%;
  background-color: #f6f8fa;
}
._page-element-detail .layout {
  width: 1200px;
  margin: 0 auto;
}
._page-element-detail .router {
  padding: 24px 0 21px;
  font-size: 12px;
  color: #676e7a;
  letter-spacing: 1px;
}
._page-element-detail .router b {
  color: #345fef !important;
  font-weight: 600 !important;
}
._page-element-detail .content {
  width: 1200px;
  padding: 33px 47px 54px 28px;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 4px;
}
._page-element-detail .content p {
  font-size: 12px;
  width: 20px;
  height: 20px;
  background: linear-gradient(318deg, #3a7fff, #275af0);
  border-radius: 4px;
  color: #fff;
  line-height: 20px;
  text-align: center;
  display: inline-block;
  margin-top: 2px;
  margin-right: 16px;
}
._page-element-detail .content h1 {
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  color: #202937;
  line-height: 25px;
  margin-bottom: 27px;
  vertical-align: top;
}
._page-element-detail .content .left {
  max-width: 809px;
}
._page-element-detail .content .left .left-img-box {
  display: inline-block;
  position: relative;
}
._page-element-detail .content .left .left-img-box .watermark {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  background: transparent;
  opacity: 0.3;
}
._page-element-detail .content .left,
._page-element-detail .right {
  display: inline-block;
  vertical-align: top;
}
._page-element-detail .content .right {
  margin-left: 40px;
}
._page-element-detail .content .left img {
  width: 798px;
  height: 699px;
  background: #f6f8fa;
  border-radius: 4px;
}
._page-element-detail .content .left .statement {
  margin-top: 21px;
  width: 809px;
  color: #a2a8b1;
  font-size: 12px;
  line-height: 22px;
}
._page-element-detail .content .left .tag {
  margin-top: 20px;
}
._page-element-detail .classify-tit {
  width: 37px;
  font-size: 12px;
  color: #333;
  line-height: 28px;
  float: left;
}
._page-element-detail .classify-li {
  font-size: 12px;
  color: #9ba3ab;
  display: inline-block;
  margin-right: 17px;
  margin-bottom: 10px;
  padding: 3px 9px;
  line-height: 20px;
  border-radius: 2px;
  border: 1px solid #ebf1f5;
  cursor: pointer;
}
._page-element-detail .classify-li:hover {
  border: 1px solid #265eef;
  color: #265eef;
}
._page-element-detail .down-btn {
  width: 273px;
  height: 50px;
  background: #265eef;
  border-radius: 4px;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
}
._page-element-detail .down-btn:hover {
  background: linear-gradient(90deg, #0032f7, #0085fe);
}
._page-element-detail .down-btn .iconfont {
  font-size: 15px;
  margin-right: 7px;
}
._page-element-detail .right .tip {
  width: 273px;
  height: 170px;
  background: rgba(236, 241, 245, 0.34);
  border-radius: 4px;
  margin-top: 24px;
  padding: 18px 0 0 13px;
}
._page-element-detail .tip .iconfont {
  font-size: 17px;
  color: #8493a7;
}
._page-element-detail .tip li span {
  color: #202937;
  font-size: 14px;
}
._page-element-detail .tip li:not(:first-child) {
  font-weight: 500;
  margin-top: 16px;
  margin-left: 12px;
  line-height: 20px;
  position: relative;
}
._page-element-detail .tip li:not(:first-child):before {
  content: ' ';
  width: 4px;
  height: 4px;
  background-color: #185bf8;
  border-radius: 2px;
  position: absolute;
  left: -12px;
  top: 8px;
}
._page-element-detail .info {
  margin-top: 29px;
}
._page-element-detail .info li {
  margin-bottom: 11px;
  font-size: 14px;
  color: #9ba3ab;
  line-height: 20px;
}
._page-element-detail .info li span {
  padding: 3px 5px;
  background-color: #c7a269;
  border-radius: 4px;
  color: #fff;
}
._page-element-detail .info li img {
  width: 20px;
  height: 20px;
}
._page-element-detail .recommend {
  width: 1200px;
  margin: 31px auto 0;
  padding-bottom: 50px;
}
._page-element-detail .recommend .recommend-title {
  color: #333;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 26px;
}
.recommend .cs {
  text-align: center;
}
.name-to-img {
  width: 20px !important;
  height: 20px !important;
}
.detail-content {
  position: relative;
}
.detail-content .bg {
  position: absolute;
  top: 300px;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 380px;
  background-color: #f6f8fa;
}
.detail-content .router {
  padding: 16px 0;
  font-size: 12px;
  color: #676e7a;
  letter-spacing: 1px;
}
.detail-content .router a:hover {
  color: #265eef;
}
.detail-content .router b {
  color: #676e7a;
  font-weight: 600;
}
.detail-content .title {
  font-size: 20px;
  color: #212936;
  line-height: 24px;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.detail-content .vip-source {
  margin-left: 10px;
  vertical-align: middle;
  display: inline-block;
  width: 68px;
  height: 24px;
  background: #efe4d4;
  border-radius: 4px;
  text-align: center;
  line-height: 24px;
  font-size: 12px;
  letter-spacing: 0;
  color: #865d20;
}
.detail-content .banner {
  width: 100%;
  height: 420px;
  position: relative;
}
.detail-content .banner .make-img {
  background-color: #232323;
  font-size: 84px;
  color: #fff;
  line-height: 420px;
}
.detail-content .banner .img-box,
.detail-content .banner .make-img {
  width: 1200px;
  height: 420px;
  overflow: hidden;
  text-align: center;
}
.detail-content .banner img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.detail-content .go-share {
  position: absolute;
  top: 16px;
  right: 15px;
  z-index: 2;
}
.detail-content .go-share button {
  width: 90px;
  height: 38px;
  background: hsla(0, 0%, 100%, 0.12);
  border-radius: 3px;
  text-align: center;
  line-height: 38px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}
.detail-content .go-share i {
  font-size: 14px;
  margin-right: 5px;
}
.detail-content .go-share .share-pop {
  position: absolute;
  top: 40px;
  left: -133px;
  width: 356px;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 0 16px 0 rgba(196, 199, 207, 0.23);
}
.detail-content .go-share .share-pop.slideDown {
  padding: 35px 22px 36px;
}
.detail-content .go-share .share-pop:before {
  position: absolute;
  content: '';
  top: -7px;
  left: 50%;
  margin-left: -8px;
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: -2px -2px 2px 0 rgba(196, 199, 207, 0.23);
  transform: rotate(45deg);
}
.detail-content .share-pop .copy-box {
  margin: 0 auto 35px;
  width: 305px;
  height: 38px;
  border-radius: 19px;
  background-color: #f6f8fa;
  overflow: hidden;
  display: flex;
}
.detail-content .share-pop .copy-input {
  width: 210px;
  height: 100%;
  border: none;
  background-color: transparent;
  font-size: 14px;
  color: #232330;
}
.detail-content .share-pop .btn-copy {
  width: calc(100% - 210px);
  height: 100%;
  line-height: 38px;
  background-color: #265eef;
  text-align: center;
  font-size: 14px;
  color: #fff;
}
.detail-content .share-pop .share-ways {
  font-size: 16px;
  color: #303030;
  line-height: 24px;
}
.detail-content .share-pop .share-ways img {
  margin-right: 5px;
  height: 24px;
  vertical-align: -4px;
}
.detail-content .share-pop .share-ways .ml {
  margin-left: 62px;
}
.detail-content .show-video {
  position: absolute;
  bottom: -21px;
  left: 50%;
  margin-left: -77px;
  width: 154px;
  height: 42px;
  background: linear-gradient(90deg, #0032f7, #0085fe);
  color: #fff;
  border-radius: 21px;
  box-shadow: 0 0 9px 0 rgba(196, 199, 207, 0.4);
  text-align: center;
  line-height: 40px;
  font-size: 14px;
}
.detail-content .show-video:hover {
  background: linear-gradient(90deg, #0032f7, #0085fe);
  color: #fff;
  box-shadow: none;
}
.detail-content .show-video i {
  vertical-align: -2px;
  font-size: 18px;
  margin-right: 5px;
}
.detail-content .bottom-info {
  margin-top: 40px;
  position: relative;
  height: 130px;
}
.detail-content .bottom-info .font-info {
  margin-bottom: 20px;
  width: 970px;
  line-height: 24px;
  font-size: 14px;
  color: #686e79;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail-content .bottom-info .font-info .fi-name {
  display: inline-block;
}
.detail-content .bottom-info .font-info span {
  margin-right: 30px;
}
.detail-content .bottom-info .font-info b {
  font-weight: 400;
}
.detail-content .bottom-info .tag-box {
  width: 970px;
  line-height: 24px;
  font-size: 14px;
  color: #686e79;
  display: flex;
  justify-content: flex-start;
}
.detail-content .bottom-info .tag-box .fi-name {
  display: inline-block;
  width: 57px;
  text-align-last: justify;
}
.detail-content .tag-box .tag-list {
  display: inline-block;
  width: 900px;
  height: 56px;
  overflow: hidden;
}
.detail-content .bottom-info .tag {
  float: left;
  margin: 0 15px 8px 0;
  padding: 0 10px;
  height: 24px;
  background: #fff;
  border-radius: 4px;
  text-align: center;
  line-height: 24px;
  font-size: 14px;
  color: #265eef;
}
.detail-content .bottom-info .btn-group {
  position: absolute;
  bottom: 36px;
  right: 0;
  background-color: #f6f8fa;
  width: 220px;
  height: 94px;
}
.detail-content .bottom-info .btn-collect,
.detail-content .bottom-info .btn-download,
.detail-content .bottom-info .btn-vip {
  display: block;
  width: 100%;
  height: 40px;
  border-radius: 4px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  color: #fff;
  margin: 10px 0;
}
.detail-content .bottom-info .btn-download {
  background: #265eef;
}
.detail-content .bottom-info .btn-download:hover {
  background: linear-gradient(90deg, #0032f7, #0085fe);
}
.detail-content .bottom-info .btn-collect {
  background: #000;
}
.detail-content .bottom-info .btn-vip {
  background: #cfa66d;
  cursor: pointer;
}
.detail-content .operate-box {
  padding-top: 42px;
}
.detail-content .dark-mode {
  background-color: #000;
}
.detail-content .font-desc {
  position: relative;
  height: 32px;
}
.detail-content .font-desc .font-name {
  float: left;
  font-size: 14px;
  color: #292b2f;
  line-height: 32px;
}
.detail-content .dark-mode .font-desc .check-mode,
.detail-content .dark-mode .font-desc .font-name {
  color: #f6f8fa;
}
.detail-content .dark-mode .check-mode .color {
  background-color: #f6f8fa;
}
.detail-content .dark-mode .preview-input {
  border-color: #000;
  color: #f6f8fa;
}
.detail-content .font-desc .check-mode {
  float: right;
  font-size: 14px;
  color: #292b2f;
  line-height: 32px;
}
.detail-content .check-mode .color {
  margin-right: 5px;
  display: inline-block;
  vertical-align: -3px;
  width: 14px;
  height: 14px;
  background: #000;
  border-radius: 2px;
}
.detail-content .pb40 {
  padding-bottom: 40px;
}
.detail-content .preview-input {
  width: 100%;
  margin: 26px 0 0;
  border: none;
  border-bottom: 1px solid #e0e2e9;
  background-color: transparent;
  font-size: 42px;
  text-indent: 0;
  letter-spacing: 4px;
}
.detail-content .preview-input div:empty:before {
  content: attr(placeholder);
  color: #cbcbcb;
}
.detail-content .preview-input div:focus:before {
  content: none;
}
.detail-content .go-download {
  display: block;
  width: 100%;
  overflow: hidden;
}
.detail-content .go-download img {
  width: 100%;
  transition: 0.28s;
}
.detail-content .go-download:hover img {
  transform: scale(1.01);
}
.detail-content .desc-tit {
  margin: 46px 0 16px;
  font-size: 14px;
  font-weight: 400;
  color: #292b2f;
}
.detail-content .desc {
  line-height: 26px;
  text-align: left;
  font-size: 14px;
  color: #686e79;
  text-indent: 2em;
  letter-spacing: 0.5px;
}
.detail-content .font-bottom {
  background: #f5f6f9;
}
.detail-content .subtitle {
  margin-top: 54px;
  padding: 62px 0 36px;
  text-align: center;
  font-size: 20px;
  color: #333;
}
.detail-content .pic-detail {
  padding: 0 50px 50px;
}
.detail-content .gray {
  margin: 20px 0;
}
.detail-content .related-recommend .l-name {
  float: left;
  margin-left: -65px;
}
.detail-content .links {
  margin: 0 20px;
  font-size: 0.75em;
}
._page-pay-4-one-font {
  width: 625px;
  height: 514px;
}
._page-pay-4-one-font .btn-close {
  position: absolute;
  top: 18px;
  right: 18px;
  cursor: pointer;
  transition: 0.3s;
}
._page-pay-4-one-font .btn-close:hover {
  transform: rotate(180deg);
}
._page-pay-4-one-font .head {
  background: #e7f7ff;
  padding: 20px 28px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
._page-pay-4-one-font .head p {
  color: #333;
  font-size: 14px;
}
._page-pay-4-one-font .head .left > div {
  margin-top: 10px;
  font-size: 34px;
}
._page-pay-4-one-font .head .right img {
  width: 23px;
  height: 23px;
  vertical-align: middle;
  border-radius: 50%;
}
._page-pay-4-one-font .head .right span {
  font-weight: 700;
  color: #333;
  font-size: 18px;
  vertical-align: middle;
  margin-left: 5px;
}
._page-pay-4-one-font .before-paying {
  text-align: center;
}
._page-pay-4-one-font .before-paying a {
  color: #1777ff !important;
  margin: 30px auto;
  font-size: 14px;
  display: inline-block;
}
._page-pay-4-one-font .before-paying p {
  color: #333;
  font-size: 20px;
  font-weight: 700;
  line-height: 2;
}
._page-pay-4-one-font .before-paying button {
  display: block;
  margin: 72px auto 0;
  height: 50px;
  width: 324px;
  font-size: 20px;
  line-height: 50px;
  padding: 0;
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  background-color: #2550e7;
}
._page-pay-4-one-font .before-paying button:hover {
  background-color: #0839f1;
}
._page-pay-4-one-font .paying {
  text-align: center;
  padding: 32px;
}
._page-pay-4-one-font .paying > span {
  color: #333;
  font-size: 18px;
}
._page-pay-4-one-font .paying > p {
  color: #333;
  font-size: 20px;
  font-weight: 700;
  margin: 10px auto 39px;
}
._page-pay-4-one-font .paying .money > span {
  font-weight: 700;
  font-size: 20px;
  color: #b29471;
}
._page-pay-4-one-font .paying .money .price {
  color: #eb5542;
}
._page-pay-4-one-font .paying .money .price span {
  font-size: 30px;
}
._page-pay-4-one-font .paying .code {
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
._page-pay-4-one-font .paying .code > div {
  width: 100px;
}
._page-pay-4-one-font .paying .code > div canvas,
._page-pay-4-one-font .paying .code > div img {
  margin-bottom: 19px;
}
._page-pay-4-one-font .paying .code > div p {
  color: #0f1d34;
  font-size: 14px;
  font-weight: 700;
}
._page-pay-4-one-font .paying .code > div p i {
  margin-right: 4px;
  font-size: 18px;
  vertical-align: middle;
}
._page-pay-4-one-font .paying .code > div p i.iconweixinzhifu {
  color: #52b529;
}
._page-pay-4-one-font .paying .code > div p i.iconzhifubaozhifu {
  color: #05f;
}
._page-pay-lifelong-vip-font {
  position: relative;
  width: 625px;
  height: 514px;
  padding: 0 18px 20px;
}
._page-pay-lifelong-vip-font .btn-close {
  position: absolute;
  top: 18px;
  right: 18px;
  cursor: pointer;
  transition: 0.3s;
}
._page-pay-lifelong-vip-font .btn-close:hover {
  transform: rotate(180deg);
}
._page-pay-lifelong-vip-font .head {
  margin: 0 -18px;
  background: linear-gradient(
    90deg,
    rgba(247, 249, 251, 0.46),
    rgba(236, 241, 245, 0.46)
  );
  padding: 16px 20px;
}
._page-pay-lifelong-vip-font .head img {
  width: 28px !important;
  height: 28px !important;
  margin-right: 10px !important;
  border-radius: 50%;
}
._page-pay-lifelong-vip-font .head span:first-of-type {
  font-weight: 700;
  font-size: 14px;
  color: #202937;
}
._page-pay-lifelong-vip-font .head .id {
  color: #202937;
  margin-right: 34px;
}
._page-pay-lifelong-vip-font .head span:last-of-type {
  color: #7a8596;
}
._page-pay-lifelong-vip-font .font {
  position: relative;
  padding-left: 5px;
  margin-top: 18px;
}
._page-pay-lifelong-vip-font .font span:first-of-type {
  color: #7a8596;
  font-size: 14px;
  margin-right: 10px;
  vertical-align: 7px;
}
._page-pay-lifelong-vip-font .font div {
  color: #202937;
  font-size: 40px;
  display: inline-block;
}
._page-pay-lifelong-vip-font .font img {
  width: 64px;
  vertical-align: 22px;
}
._page-pay-lifelong-vip-font .info {
  padding-left: 5px;
}
._page-pay-lifelong-vip-font .info > span:first-of-type {
  color: #7a8596;
  font-size: 14px;
  margin-right: 11px;
}
._page-pay-lifelong-vip-font .info .item i,
._page-pay-lifelong-vip-font .info .item span {
  color: #202937;
  font-size: 14px !important;
  font-weight: 700;
}
._page-pay-lifelong-vip-font .info .item i {
  margin-right: 4px;
}
._page-pay-lifelong-vip-font .info .item span {
  margin-right: 30px;
}
._page-pay-lifelong-vip-font hr {
  margin: 24px 0;
  border: none;
  border-bottom: 1px dashed #ecf1f5;
}
._page-pay-lifelong-vip-font .pay {
  padding-top: 8px;
  text-align: center;
}
._page-pay-lifelong-vip-font .pay p {
  color: #778598;
  font-size: 14px;
  margin-bottom: 25px;
}
._page-pay-lifelong-vip-font .pay p > span {
  margin-left: 10px;
  color: #da5f4b;
  font-size: 20px;
  font-weight: 700;
}
._page-pay-lifelong-vip-font .pay p > span span {
  font-size: 38px;
}
._page-pay-lifelong-vip-font .pay > div {
  width: 100px;
  display: inline-block;
  margin: 0 68px;
}
._page-pay-lifelong-vip-font .pay > div p {
  margin-top: 9px;
  font-weight: 700;
  font-size: 14px !important;
}
._page-pay-lifelong-vip-font .pay > div p i {
  margin-right: 10px;
  font-weight: 400;
}
._page-pay-lifelong-vip-font .pay div.wechat-pay p {
  color: #21b141;
}
._page-pay-lifelong-vip-font .pay div.ali-pay p {
  color: #1096e6;
}
._page-pay-lifelong-vip-font .footer-lifelong {
  position: absolute;
  left: 0;
  padding: 0 30px;
  bottom: 23px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._page-pay-lifelong-vip-font .footer-lifelong .other-fonts-selector {
  font-size: 12px;
  font-weight: 400;
  color: #7d8898;
  cursor: pointer;
}
._page-pay-lifelong-vip-font .footer-lifelong .other-fonts-selector:hover {
  color: #265eef;
}
._page-pay-lifelong-vip-font .footer-lifelong .agreeBtn {
  margin-right: 5px;
  cursor: pointer;
}
._page-pay-lifelong-vip-font div.terms div.checkbox,
._page-pay-lifelong-vip-font div.terms div input,
._page-pay-lifelong-vip-font div.terms div label:after,
._page-pay-lifelong-vip-font div.terms div label:before {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  line-height: 15px !important;
}
._page-pay-lifelong-vip-font div.terms div.checkbox {
  vertical-align: sub;
  margin-right: 6px;
}
._page-pay-lifelong-vip-font div.terms span {
  color: #7a8596;
}
._com-pay-lifelong-vip-font-success {
  max-width: 406px !important;
  text-align: center !important;
  padding: 30px 46px !important;
}
._com-pay-lifelong-vip-font-success h2 {
  font-size: 18px;
  color: #171e34;
}
._com-pay-lifelong-vip-font-success h2 i {
  font-size: 28px;
  color: #3ece93;
  vertical-align: middle;
  margin-right: 5px;
}
._com-pay-lifelong-vip-font-success p {
  margin-top: 19px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #202937;
}
._com-pay-lifelong-vip-font-success button {
  margin-top: 23px !important;
  height: 40px;
  font-size: 14px !important;
}
.list-content .advertisement {
  margin: 24px 9px 0;
  display: inline-block;
  border-radius: 8px;
  overflow: hidden;
}
.list-content .type-list {
  margin: 15px 0 30px;
}
.list-content {
  background-color: #f6f8fa;
  padding-bottom: 100px;
}
.list-content .category-box {
  background-color: #fff;
  padding-bottom: 26px;
}
.list-content .category-box .router {
  padding: 20px 0;
  font-size: 12px;
  color: #676e7a;
  letter-spacing: 1px;
}
.list-content .category-box .router a:hover {
  color: #265eef;
}
.list-content .category-box .router b {
  color: #676e7a;
  font-weight: 600;
}
.list-content .logo-li {
  margin: 0 9px;
  width: 184px;
  height: 91px;
  border-radius: 6px;
  background-color: #fff;
  border: 1px solid #ebeff3;
  line-height: 89px;
  text-align: center;
  cursor: pointer;
  font-size: 24px;
  color: #222;
}
.list-content .logo-li:hover {
  border: 1px dashed #67aefd;
}
.list-content .logo-li.on {
  border-color: #67aefd;
}
.list-content .logo-li.on:hover {
  border: 1px solid #67aefd;
}
.list-content .logo-li img {
  height: 51px;
  max-width: 90%;
}
.list-content .type-list {
  margin: 50px 0 30px;
  display: flex;
  justify-content: space-around;
}
.list-content .type-li {
  text-align: center;
  position: relative;
}
.list-content .type-li:hover .iconfont {
  border: 1px dashed #67aefd;
}
.list-content .type-li.on .iconfont {
  border: 1px solid #67aefd;
}
.list-content .type-li.on .iconfont.icon-jinzhi1 {
  display: block;
  border: none;
}
.list-content .type-li .iconfont.icon-jinzhi1 {
  display: none;
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 14px;
  color: #ff735d;
  border: none;
  cursor: pointer;
}
.list-content .type-li .iconfont {
  border: 1px solid #fff;
  display: block;
  border-radius: 4px;
  font-size: 46px;
  color: #333;
}
.list-content .type-li .iconfont.icon-ifonts-1 {
  color: #cfa66d;
}
.list-content .type-li img {
  height: 26px;
}
.list-content .type-li .type-amount {
  text-align: center;
  font-size: 12px;
  color: #a6a6a6;
  text-decoration: none;
}
.list-content .btn-category {
  display: block;
  margin: 0 auto;
  background-color: #ebeff3;
  border-radius: 4px;
  padding: 0 10px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  font-size: 12px;
  color: #a6a6a6;
  cursor: pointer;
}
.list-content .btn-category:hover {
  background-color: #185bf8;
  color: #fff;
}
.list-content .btn-category i {
  margin-left: 3px;
  font-size: inherit;
}
.list-content .classify-line {
  margin-bottom: 15px;
  line-height: 25px;
  padding-left: 72px;
}
.list-content .classify-line .classify-tit {
  float: left;
  margin-left: -72px;
  width: 72px;
  text-align: right;
  font-size: 14px;
  color: #a6a6a6;
}
.list-content .classify-line .classify-li {
  display: inline-block;
  margin-right: 10px;
  padding: 0 12px;
  line-height: 25px;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}
.list-content .classify-line .classify-li.on,
.list-content .classify-line .classify-li:hover {
  color: #fff;
  background-color: #185bf8;
}
.list-content .operate-menu {
  margin: 35px 0 28px;
  position: relative;
  height: 37px;
}
.list-content .operate-menu .preview-box {
  float: left;
  height: 36px;
  display: flex;
  justify-content: start;
  position: relative;
}
.list-content .preview-box .preview-input {
  width: 500px;
  height: 100%;
  border: 1px solid #eef1f5;
  border-right: none;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
  color: #333;
}
.list-content .preview-box .btn-more {
  border: 1px solid #eef1f5;
  border-left: none;
  width: 50px;
  text-align: center;
  background-color: #fff;
  height: 100%;
  line-height: 36px;
}
.list-content .preview-box .btn-more i {
  color: #a6a6a6;
  font-size: 14px;
}
.list-content .preview-box .btn-more:hover i {
  color: #185bf7;
}
.list-content .preview-box .btn-preview {
  width: 95px;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background-color: #4d4d4d;
  text-align: center;
  line-height: 36px;
  font-size: 14px;
  color: #fff;
}
.list-content .preview-box .btn-preview:hover {
  background-color: #000;
}
.list-content .preview-box .drop-down {
  position: absolute;
  top: 36px;
  left: 0;
  z-index: 3;
  background-color: #fff;
  box-shadow: 0 0 9px 0 rgba(235, 239, 243, 0.67);
  width: 550px;
  padding: 5px 0;
}
.list-content .preview-box .drop-down .select-li {
  width: 100%;
  height: 36px;
  line-height: 36px;
  text-align: left;
  padding-left: 18px;
  font-size: 12px;
  color: #333;
  cursor: pointer;
}
.list-content .preview-box .drop-down .select-li.on,
.list-content .preview-box .drop-down .select-li:hover {
  color: #185bf8;
  background: #f6f8fa;
}
.list-content .menu-style {
  float: left;
  margin: 6px 24px 6px 368px;
  line-height: 24px;
  height: 24px;
}
.list-content .menu-style i {
  vertical-align: middle;
  font-size: 24px;
  color: #d2d2d2;
  cursor: pointer;
}
.list-content .menu-style i:first-of-type {
  margin-right: 5px;
}
.list-content .menu-style i.on {
  color: #0f0f0f;
}
.list-content .sort-style {
  float: right;
}
.list-content .page-box {
  margin-top: 46px;
  display: flex;
  justify-content: center;
}
.list-content .empty-con {
  margin: 0 auto 32px;
  background-color: #fff;
  text-align: center;
  padding: 20px 0;
}
.list-content .empty-con .iconfont {
  font-size: 90px;
  color: #e6e9ed;
  display: block;
  margin-bottom: 24px;
}
.list-content .empty-con .info {
  margin-top: 4px;
  font-size: 14px;
  color: #9ba3ab;
}
.list-content .friend-links {
  font-size: 14px;
  color: #707070;
  padding: 30px 0 10px 65px;
}
.list-content .friend-links .l-name {
  float: left;
  margin-left: -65px;
}
.list-content .friend-links .links {
  float: left;
  margin: 0 10px 10px;
  cursor: pointer;
}
.list-content .friend-links .links:hover {
  color: #265eef;
  text-decoration: underline;
}
.list-content .introduce {
  line-height: 20px;
  font-size: 14px;
  color: #707070;
}
.help-center {
  padding-bottom: 120px;
}
.help-center .nav-list {
  margin-top: 35px;
  text-align: center;
}
.help-center .nav-list .nav-li {
  margin-right: 50px;
  display: inline-block;
  font-size: 18px;
  color: #9c9c9c;
  padding-bottom: 14px;
  position: relative;
  cursor: pointer;
}
.help-center .nav-list .nav-li:last-of-type {
  margin-right: 0;
}
.help-center .nav-list .nav-li.on,
.help-center .nav-list .nav-li:hover {
  color: #000;
  font-weight: 600;
}
.help-center .nav-list .nav-li.on:before {
  position: absolute;
  content: '';
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  background: linear-gradient(270deg, #12d4ff, #315dff);
  border-radius: 4px;
}
.help-center .content-question {
  background-color: #f8f9fa;
  border-radius: 12px;
  border: 1px solid hsla(0, 0%, 79.6%, 0.37);
  overflow: hidden;
}
.help-center .main-title {
  padding-left: 37px;
  line-height: 76px;
  background-color: #fff;
  border-bottom: 1px solid #e7e8e8;
  font-size: 18px;
  color: #000;
}
.help-center .content-question .main-title i {
  font-size: 18px;
  margin-right: 20px;
}
.help-center .content-question .left-nav {
  float: left;
  width: 205px;
  height: 100%;
}
.help-center .left-nav .ln-li {
  padding-left: 60px;
  line-height: 70px;
  border-bottom: 1px solid #e7e8e8;
  font-size: 18px;
  color: #7b8490;
  position: relative;
  cursor: pointer;
}
.help-center .left-nav .ln-li:first-of-type {
  border-top: 1px solid #e7e8e8;
}
.help-center .left-nav .ln-li.on,
.help-center .left-nav .ln-li:hover {
  background-color: #fff;
  color: #000;
  font-weight: 600;
}
.help-center .left-nav .ln-li i {
  position: absolute;
  right: 55px;
  top: 28px;
  color: inherit;
  font-size: 14px;
}
.help-center .left-nav .ln-li.on i {
  color: #3a7fff;
}
.help-center .content-question .main-con {
  float: right;
  width: calc(100% - 205px);
  background-color: #fff;
}
.help-center .content-question .qa-list {
  padding: 0 20px;
}
.help-center .content-question .qa-li {
  border-bottom: 1px dotted #eee;
  cursor: pointer;
}
.help-center .qa-list .ql-q {
  padding: 24px 0;
  font-size: 18px;
  color: #000;
  line-height: 22px;
  letter-spacing: 1px;
}
.help-center .qa-list .ql-q i {
  margin-right: 15px;
  font-size: 18px;
  color: #515151;
  display: inline-block;
  transition: 0.3s;
}
.help-center .qa-li.on .ql-q i {
  color: #19a560;
  transform: rotate(90deg);
}
.help-center .qa-li .ql-a {
  display: block;
  width: 100%;
  padding: 0 10px;
  margin-bottom: 22px;
}
.help-center .qa-list .ql-a img {
  max-width: 100%;
}
.help-center .qa-list .ql-a p {
  line-height: 26px;
  text-indent: 2em;
  font-size: 14px;
  color: #7b8490;
  letter-spacing: 0.8px;
}
.help-center .content-box {
  display: flex;
  justify-content: start;
}
.help-center .content-box .left-nav,
.help-center .content-box .main-con {
  float: none;
}
.help-center .content-box .main-con {
  padding: 0 20px;
}
.help-center .ql-sum {
  padding: 12px 0;
  font-size: 18px;
  color: #000;
  line-height: 22px;
  letter-spacing: 1px;
  font-weight: 600;
}
.help-center .ql-detail img {
  max-width: 100%;
}
.help-center .ql-detail p {
  line-height: 26px;
  text-indent: 2em;
  font-size: 14px;
  color: #7b8490;
  letter-spacing: 0.8px;
}
.index-content .banner {
  width: 100%;
  position: relative;
  margin-bottom: 30px;
}
.index-content .banner .banner-li {
  width: 100%;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}
.index-content .banner .banner-li img {
  height: 100%;
  width: 100%;
}
.index-content .banner .btn-download {
  position: absolute;
  margin: 0;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 212px;
  height: 50px;
  border-radius: 25px;
  background-image: linear-gradient(90deg, #aafce2, #d0fdec);
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  color: #000;
  cursor: pointer;
}
.index-content .banner .btn-download:hover {
  background-image: linear-gradient(270deg, #aafce2, #d0fdec);
}
.index-content .recom-li {
  margin: 10px auto;
  width: 280px;
  height: 151px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 2px 2px 8px 0 rgba(57, 62, 75, 0.5);
}
.index-content .recom-li img {
  width: 100%;
  transition: 0.28s;
}
.index-content .recom-li:hover img {
  transform: scale(1.08);
}
.index-content .type-list {
  margin: 38px auto 34px;
  display: flex;
  justify-content: space-around;
}
.index-content .type-li {
  text-align: center;
  transition: 0.28s;
  cursor: pointer;
}
.index-content .type-li:hover {
  transform: translateY(-3px);
}
.index-content .type-li:hover .iconfont,
.index-content .type-li:hover .type-amount {
  text-decoration: none;
}
.index-content .type-li .iconfont {
  font-size: 46px;
  color: #333;
}
.index-content .type-li .icon-ifonts-1.iconfont {
  color: #cfa66d;
}
.index-content .type-li img {
  height: 26px;
}
.index-content .type-li .type-amount {
  text-align: center;
  font-size: 12px;
  color: #a6a6a6;
  text-decoration: none;
}
.index-content .gray {
  background-color: #f6f8fa;
}
.index-content .pt {
  padding-top: 45px;
  padding-bottom: 62px;
}
.index-content .title-tab {
  text-align: left;
  padding-bottom: 10px;
  margin-bottom: 26px;
}
.index-content .title-tab .tab-li {
  margin-right: 40px;
  position: relative;
  font-size: 22px;
  color: #8d8e8f;
  font-weight: 600;
  cursor: pointer;
}
.index-content .title-tab .tab-li.on {
  color: #252525;
}
.index-content .title-tab .tab-li:hover {
  color: #265eef;
}
.index-content .subtitle {
  font-size: 22px;
  color: #252525;
  padding-bottom: 10px;
  position: relative;
}
.index-content .subtitle:before,
.index-content .title-tab .tab-li.on:before {
  position: absolute;
  content: '';
  bottom: -5px;
  left: 1px;
  width: 24px;
  height: 5px;
  background: #265eef;
}
.index-content .title-tab .go-list {
  float: right;
  font-size: 12px;
  color: #333;
  line-height: 32px;
  cursor: pointer;
}
.index-content .title-tab .go-list:hover {
  color: #265eef;
}
.index-content .btn-hover:hover {
  background: linear-gradient(90deg, #0032f7, #0085fe);
}
.index-content .btn-list {
  margin: 25px auto 48px;
  display: block;
  width: 206px;
  height: 45px;
  background: #265eef;
  border-radius: 6px;
  text-align: center;
  line-height: 45px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}
.index-content .btn-list:hover {
  background: linear-gradient(90deg, #0032f7, #0085fe);
}
.index-content .font-show {
  margin-top: 36px;
  width: 100%;
  min-height: 322px;
  background: #fff;
  border-radius: 4px;
  padding: 20px 0;
  position: relative;
}
.index-content .font-show .fl-con {
  width: 940px;
  min-height: 282px;
  padding-left: 46px;
  display: table;
}
.index-content .font-show .input-box {
  display: table-cell;
  text-align: left;
  color: #1d1d1d;
  vertical-align: middle;
  overflow: hidden;
}
.index-content .font-show .btn-download {
  position: absolute;
  bottom: 20px;
  right: 248px;
  width: 104px;
  height: 30px;
  margin: 0;
  border-radius: 4px;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.index-content .font-show .fr-con {
  float: right;
  width: 248px;
  padding: 0 22px;
  height: 100%;
  overflow: auto;
}
.index-content .font-show .family-li {
  width: 100%;
  height: 45px;
  background: #f6f8fa;
  border-radius: 4px;
  margin-bottom: 14px;
  padding: 0 10px;
  text-align: left;
  line-height: 45px;
  font-size: 18px;
  color: #000;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.index-content .font-show .family-li:last-of-type {
  margin-bottom: 0;
}
.index-content .font-show .family-li.on,
.index-content .font-show .family-li:hover {
  background-color: #272727;
  color: #fff;
}
.index-content .guanggao-area {
  display: block;
  margin-top: 60px;
  width: 100%;
}
.index-content .guanggao-area img {
  width: 100%;
}
.index-content .sec-title {
  padding: 62px 0 16px;
  font-size: 22px;
  color: #252525;
  text-align: center;
}
.index-content .sec-desc {
  font-size: 14px;
  color: #707070;
  text-align: center;
}
.index-content .step-box {
  margin-top: 58px;
  display: flex;
  justify-content: space-around;
}
.index-content .step-li {
  text-align: center;
}
.index-content .step-li img {
  height: 173px;
}
.index-content .step-li .step-info {
  margin-top: 44px;
  font-size: 16px;
  color: #5a78d9;
  line-height: 20px;
}
.index-content .step-li .step-info .seq {
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background: #265eef;
  border-radius: 10px;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  color: #fff;
}
.index-content .btn-download {
  margin: 54px auto 58px;
  display: block;
  width: 206px;
  height: 45px;
  background: #265eef;
  border-radius: 6px;
  text-align: center;
  line-height: 45px;
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.5px;
}
.index-content .btn-download:hover {
  background: linear-gradient(90deg, #0032f7, #0085fe);
}
.index-content .logo-li {
  float: left;
  margin: 40px 33px 0 0;
  width: 212px;
  height: 94px;
  background: #fff;
  border-radius: 6px;
  line-height: 94px;
  text-align: center;
  font-size: 22px;
  color: #000;
}
.index-content .logo-li:nth-child(5n) {
  margin-right: 0;
}
.index-content .logo-li img {
  height: 46px;
}
.index-content .brand-contact {
  padding: 44px 0 48px;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  color: #707070;
}
.index-content .btn-download.md {
  margin: 22px auto 0;
}
.index-content .video-box {
  margin: 30px auto 0;
  width: 830px;
  border: 20px solid #000001;
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  background: #0040f5;
}
.index-content .video-box .slogen {
  line-height: 75px;
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  color: #e1feff;
}
.index-content .video-box .course {
  margin: 0 auto;
  width: 684px;
  background: #fff;
  padding: 20px 20px 0;
  border-radius: 10px 10px 0 0;
}
.index-content .video-box video {
  width: 100%;
}
.index-content .friend-links {
  font-size: 14px;
  color: #707070;
  padding: 30px 0 10px 65px;
}
.index-content .friend-links .l-name {
  float: left;
  margin-left: -65px;
}
.index-content .friend-links .links {
  float: left;
  margin: 0 10px 10px;
  cursor: pointer;
}
.index-content .friend-links .links:hover {
  color: #265eef;
  text-decoration: underline;
}
.index-module_wrap__2-A17 {
  background: transparent;
  border-radius: 5px;
}
.index-module_wrap__2-A17 .icon-guanbi1 {
  position: absolute;
  color: #fff;
  font-size: 24px;
  right: -20px;
  top: -20px;
  cursor: pointer;
}
.inspire-content {
  background: url(https://pic.51ifonts.com/images/inspire/bg2.jpg) no-repeat top;
  background-size: 100% 2846px;
  height: 2846px;
}
.inspire-content .main-title {
  padding: 36px 0 48px;
  text-align: center;
  font-size: 66px;
  color: #fff;
  letter-spacing: 1px;
  font-weight: 400;
}
.inspire-content .p1 {
  display: block;
  margin: 0 auto;
  width: 1200px;
  background: #ddf1ff;
  border-radius: 40px;
  padding: 35px 100px 42px;
  text-align: center;
}
.inspire-content .p1 .logo {
  height: 80px;
  margin-bottom: 38px;
}
.inspire-content .p1 .info {
  margin-bottom: 16px;
  font-size: 18px;
  color: #6d7278;
}
.inspire-content .p1 .card-list {
  margin: 40px 0 30px;
  display: flex;
  justify-content: space-between;
}
.inspire-content .p1 .card-li {
  width: 220px;
  height: 400px;
  background: #fff;
  border: 1px solid #fff;
  box-shadow: 2px 2px 4px 0 #cfdde8;
  border-radius: 8px;
  padding: 30px 20px;
  text-align: left;
  position: relative;
  transition: 0.3s;
}
.inspire-content .p1 .card-li:hover {
  border-color: #99bbf4;
  box-shadow: 2px 4px 6px 0 #cfdde8;
}
.inspire-content .p1 .card-li .cl-tit {
  font-size: 20px;
  color: #000;
  font-weight: 500;
  margin-bottom: 18px;
}
.inspire-content .p1 .card-li .cl-tit .welfare {
  margin-left: 5px;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.inspire-content .p1 .welfare .iconfont {
  font-size: 18px;
  color: #0662fe;
}
.inspire-content .p1 .welfare .inner-pop {
  position: absolute;
  top: 0;
  left: 22px;
  z-index: 2;
  width: 0;
  height: 0;
  background: #fff;
  box-shadow: 2px 4px 6px 0 #cfdde8;
  border-radius: 8px;
  border: 1px solid #99bbf4;
  font-size: 14px;
  color: #6d7278;
  font-weight: 400;
  line-height: 24px;
  transition: width, opacity 0.3s;
  overflow: hidden;
  opacity: 0;
}
.inspire-content .p1 .welfare:hover .inner-pop {
  width: 260px;
  height: 60px;
  padding: 6px 8px;
  opacity: 1;
  transform: translateY(-35%);
}
.inspire-content .p1 .card-li .cl-desc {
  font-size: 14px;
  color: #6d7278;
  line-height: 24px;
  letter-spacing: 0.8px;
}
.inspire-content .p1 .card-li .cl-pic {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  height: 136px;
}
.inspire-content .p1 .go-add {
  display: block;
  width: 300px;
  height: 40px;
  background: #0662fe;
  border: 1px solid #99bbf4;
  box-shadow: 2px 4px 6px 0 #cfdde8;
  border-radius: 8px;
  text-align: center;
  line-height: 38px;
  font-size: 16px;
  color: #fff;
  transition: 0.3s;
}
.inspire-content .p1 .go-add:hover {
  background: #0058ec;
}
.inspire-content .p2 {
  margin: 80px auto 0;
  width: 1000px;
  display: flex;
  justify-content: space-between;
}
.inspire-content .p2 .p-box {
  width: 480px;
  height: 600px;
  background: #fff;
  border: 1px solid #fff;
  box-shadow: 2px 2px 4px 0 #cfdde8;
  border-radius: 8px;
  text-align: left;
  padding-top: 40px;
  transition: 0.3s;
}
.inspire-content .p2 .p-box:hover {
  box-shadow: 2px 4px 6px 0 #cfdde8;
  border-color: #99bbf4;
}
.inspire-content .p2 .p-box .pb-tit {
  margin-left: -3px;
  width: 345px;
  height: 50px;
  background: url(https://pic.51ifonts.com/images/inspire/flag.png) no-repeat
    100% 0;
  background-size: auto 100%;
  padding-left: 20px;
  font-size: 28px;
  color: #000;
  font-weight: 500;
  line-height: 50px;
  letter-spacing: 0.2px;
}
.inspire-content .p2 .p-box:hover .pb-tit {
  background-image: url(https://pic.51ifonts.com/images/inspire/flag2.png);
}
.inspire-content .p2 .p-box .pb-info {
  margin-top: 30px;
  padding-left: 70px;
  font-size: 20px;
  line-height: 28px;
  color: #000;
}
.inspire-content .p2 .p-box .pb-desc {
  margin-top: 20px;
  padding-left: 70px;
  line-height: 22px;
  font-size: 14px;
  color: #6d7278;
}
.inspire-content .p2 .p-box .go-add {
  width: 200px;
  height: 40px;
  background: #fff;
  box-shadow: 2px 4px 6px 0 #cfdde8;
  border-radius: 8px;
  border: 1px solid #99bbf4;
  text-align: center;
  line-height: 38px;
  font-size: 16px;
  color: #0662fe;
  text-transform: none;
  transition: 0.3s;
}
.inspire-content .p2 .p-box .go-add:hover {
  background: #0662fe;
  border-color: #99bbf4;
  color: #fff;
}
.inspire-content .p2 .p-box .go-download {
  margin: 20px auto 0;
  display: block;
  width: 80px;
  text-align: center;
  font-size: 14px;
  color: #6d7278;
}
.inspire-content .p2 .p-box .go-download:hover {
  color: #0662fe;
}
.inspire-content .p3 {
  margin-top: 80px;
  width: 100%;
  height: 520px;
  background: #ecf7ff;
  text-align: center;
  padding-top: 40px;
}
.inspire-content .p3 .subtitle {
  font-size: 28px;
  color: #000;
  line-height: 40px;
  margin-bottom: 40px;
}
.inspire-content .p3 img {
  height: 308px;
}
.inspire-content .p3 .contact {
  margin-top: 30px;
  font-size: 16px;
  color: #0091ff;
}
.inspire-content .p4 {
  text-align: center;
  padding-top: 98px;
  position: relative;
}
.inspire-content .p4 .info-con {
  position: absolute;
  top: 98px;
  left: 50%;
  margin-left: -317px;
  width: 634px;
  height: 262px;
  padding: 0 90px;
}
.inspire-content .p4 .p-tit {
  text-align: center;
  line-height: 48px;
  font-size: 20px;
  color: #000;
  margin-bottom: 8px;
}
.inspire-content .p4 p {
  font-size: 14px;
  color: #000;
  text-align: left;
  line-height: 24px;
}
.contact-pop {
  width: 420px;
  text-align: center;
  padding: 30px 35px 20px;
}
.contact-pop .title {
  font-size: 24px;
  font-weight: 600;
  color: #000;
}
.contact-pop .contact {
  margin-top: 20px;
  font-size: 18px;
  color: #0662fe;
}
.contact-pop .desc {
  margin: 20px 0 16px;
  font-size: 18px;
  color: #000;
}
.contact-pop .step {
  font-size: 16px;
  color: #6d7278;
  margin-bottom: 12px;
  text-align: left;
}
.contact-pop .btn-know {
  width: 132px;
  height: 30px;
  background: #0662fe;
  box-shadow: 2px 4px 6px 0 #cfdde8;
  border-radius: 8px;
  border: 1px solid #99bbf4;
  font-size: 16px;
  color: #fff;
}
.contact-pop .btn-know:hover {
  background: #0058ec;
}
.contact-pop .go-download {
  font-size: 12px;
  color: #0662fe;
}
.new-team-content {
  background-color: #fff;
}
.new-team-content .btn-hover2,
.new-team-content .btn-hover:hover {
  background-color: #4d73ec !important;
  color: #fff !important;
  transition: 0.3s;
}
.new-team-content .btn-hover2:hover {
  background-color: #3d69f3 !important;
}
.new-team-content .MuiButtonBase-root {
  padding: 0;
}
.new-team-content .buy-footer {
  position: fixed;
  min-width: 1200px;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: all 1s ease-in-out;
  height: 85px;
  background: #fff;
  box-shadow: 0 3px 11px 0 #dfe3ea;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 100;
  font-size: 24px;
  font-weight: 500;
}
.new-team-content .buy-footer > div > span {
  color: #4db467;
}
.new-team-content .buy-footer .footer-btn {
  width: 262px;
  height: 50px;
  display: block;
  background: #4d73ec;
  border-radius: 6px;
  line-height: 50px;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  margin-left: 593px;
  cursor: pointer;
}
.new-team-content .buy-footer .footer-btn:hover {
  background: #3d69f3;
}
.new-team-content .new-banner {
  height: 990px;
  background-image: linear-gradient(180deg, #0e152c 28%, #eef0f5 0);
  text-align: center;
  overflow: hidden;
}
.new-team-content .new-banner .new-banner-title {
  font-size: 32px;
  font-weight: 500;
  color: #fff;
  line-height: 18px;
  margin-top: 57px;
}
.new-team-content .new-banner .new-banner-title > span {
  color: #69d284;
}
.new-team-content .new-banner .new-banner-text1 {
  color: #fff;
  margin-top: 33px;
  font-size: 17px;
}
.new-team-content .new-banner .new-banner-text1 > span {
  color: #69d284;
}
.new-team-content .new-banner .new-banner-text1 > a {
  color: #69d284;
  display: inline-block;
  height: 18px;
  border-bottom: 1px solid #69d284;
}
.new-team-content .new-banner .new-banner-fonts {
  margin: 39px auto 0;
  width: 1200px;
  height: 638px;
  background: #fff;
  border-radius: 14px;
  padding: 28px 45px 37px;
}
.new-team-content .new-banner .new-banner-fonts .type-list {
  text-align: left;
  margin-bottom: 28px;
}
.new-team-content .new-banner .new-banner-fonts .type-list .type-li {
  display: inline-block;
  width: 127px;
  height: 52px;
  line-height: 52px;
  text-align: center;
  font-size: 23px;
  background: #f0f1f4;
  border-radius: 6px;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}
.new-team-content
  .new-banner
  .new-banner-fonts
  .type-list
  .type-li:not(:last-child) {
  margin-right: 36px;
}
.new-team-content .new-banner .new-banner-fonts .type-list .type-li.active {
  background: #fff;
  border: 1px solid #4d73ec;
  border-radius: 4px;
  box-shadow: 0 0 3px 1px #4d73ec;
}
.new-team-content .new-banner .new-banner-text2 {
  color: #fff;
  margin-top: 33px;
  font-size: 16px;
  color: #0e152c;
  font-size: 15px;
}
.new-team-content .new-banner .new-banner-text2 > span {
  color: #69d284;
  font-weight: 600;
}
.new-team-content .new-banner .new-banner-btn {
  display: block;
  margin: 30px auto 0;
  width: 341px;
  height: 56px;
  background: #4d73ec;
  border-radius: 6px;
  line-height: 56px;
  text-align: center;
  color: #fff;
  cursor: pointer;
}
.new-team-content .new-banner .new-banner-btn:hover {
  background: #3d69f3;
}
.new-team-content .auth-mode {
  width: 1036px;
  margin: 0 auto;
  text-align: center;
  color: #000;
  padding-top: 38px;
  position: relative;
}
.new-team-content .auth-mode > h3 {
  font-size: 29px;
  font-weight: 500;
}
.new-team-content .auth-mode > div {
  margin-bottom: 40px;
}
.new-team-content .auth-mode > div > img {
  position: relative;
  z-index: 1;
}
.new-team-content .auth-mode .auth-mode-title1 {
  width: 199px;
  height: 53px;
  background: #0e152c;
  border: 1px solid #0e152c;
  border-radius: 27px;
  text-align: center;
  line-height: 53px;
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  margin: 30px auto 0;
}
.new-team-content .auth-mode .auth-mode-relationBox {
  display: flex;
  margin-top: -6px;
}
.new-team-content .auth-mode .auth-mode-relationBox > div {
  flex: 1;
  height: 202px;
  background: #eef0f5;
  border-radius: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.new-team-content .auth-mode .auth-mode-relationBox > div:first-child {
  margin-right: 45px;
}
.new-team-content .auth-mode .auth-mode-relationBox > div > div {
  width: 205px;
  height: 103px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.new-team-content .auth-mode .auth-mode-relationBox > div > div > p {
  font-weight: 600;
}
.new-team-content
  .auth-mode
  .auth-mode-relationBox
  > div
  > div
  > p:first-child {
  font-size: 19px;
}
.new-team-content .auth-mode .auth-mode-relationBox > div > div > p:last-child {
  margin-top: 16px;
  font-size: 22px;
  color: #4db467;
}
.new-team-content .auth-mode .auth-mode-relationBox > div > p {
  font-size: 16px;
  font-weight: 400;
  color: #0e152c;
  line-height: 23px;
}
.new-team-content .auth-mode .auth-mode-relationBox > div > p:first-of-type {
  margin-top: 16px;
}
.new-team-content .auth-mode .auth-mode-yourAuth {
  width: 1036px;
  background: #eef0f5;
  border-radius: 13px;
  text-align: center;
  padding: 33px 0 41px;
  margin: 29px auto 0;
}
.new-team-content .auth-mode .auth-mode-yourAuth > h3 {
  font-size: 22px;
  font-weight: 500;
  color: #0e152c;
}
.new-team-content .auth-mode .auth-mode-yourAuth > p {
  margin-top: 16px;
  font-size: 16px;
  color: #0e152c;
}
.new-team-content .auth-mode .auth-mode-yourAuth .auth-mode-title2 {
  margin: 20px auto 0;
  width: 170px;
  height: 36px;
  background: #0e152c;
  border-radius: 18px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: 36px;
}
.new-team-content .auth-mode .auth-mode-yourAuth .auth-show {
  width: 882px;
  height: 193px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 13px;
  margin: -7px auto;
  padding: 26px 27px 25px;
}
.new-team-content .auth-mode .auth-mode-yourAuth .auth-show > h3 {
  font-size: 18px;
  font-weight: 500;
  color: #0e152c;
}
.new-team-content .auth-mode .auth-mode-yourAuth .auth-show > ul {
  margin-top: 19px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
}
.new-team-content .auth-mode .auth-mode-yourAuth .auth-show > ul > li {
  padding: 0 42px;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #eef0f5;
  border-radius: 13px;
  font-size: 16px;
  line-height: 18px;
}
.new-team-content
  .auth-mode
  .auth-mode-yourAuth
  .auth-show
  > ul
  > li:last-child {
  padding: 0 24px;
}
.new-team-content .auth-mode .auth-mode-yourAuth .auth-show > p {
  margin-top: 27px;
  font-size: 22px;
  font-weight: 600;
  color: #4db467;
}
.new-team-content .banner {
  height: 930px;
  background: #0e152c;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.new-team-content .banner .banner-bg-img {
  width: 148px;
  position: absolute;
  left: 50%;
  top: 170px;
  transform: translateX(500px);
}
.new-team-content .banner .bg {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 550px;
  background-color: #eef0f5;
}
.new-team-content .banner .title {
  padding: 40px 0;
  font-size: 36px;
  color: #4a73f6;
  font-weight: 700;
  letter-spacing: 1px;
}
.new-team-content .banner .tab-box {
  margin: 49px auto;
  width: 400px;
  height: 55px;
  background-color: #fff;
  border-radius: 28px;
  padding: 2px;
  position: relative;
  z-index: 1;
}
.new-team-content .banner .tab-box:before {
  position: absolute;
  content: '';
  top: 2px;
  left: 2px;
  width: 148px;
  height: 51px;
  border-radius: 28px;
  background-color: #6187ff;
  z-index: -1;
  transition: 0.3s;
}
.new-team-content .banner .tab-box.move:before {
  left: 150px;
  width: calc(100% - 152px);
}
.new-team-content .tab-box .tab-li {
  display: inline-block;
  min-width: 148px;
  height: 100%;
  border-radius: 28px;
  text-align: center;
  line-height: 51px;
  font-size: 16px;
  font-weight: 700;
  color: #0e152c;
  cursor: pointer;
  transition: 0.3s;
}
.new-team-content .tab-box .tab-li:last-of-type {
  width: calc(100% - 148px);
}
.new-team-content .tab-box .tab-li.on {
  color: #fff;
}
.new-team-content .priv-list {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
.new-team-content .priv-list .priv-li {
  margin: 0 15px;
  width: 200px;
  height: 72px;
  background: #161e37;
  border-radius: 36px;
  text-align: center;
}
.new-team-content .priv-list .priv-li .tit {
  padding: 18px 0 10px;
  font-size: 20px;
  color: #fff;
  font-weight: 600;
}
.new-team-content .priv-list .priv-li .expire {
  font-size: 12px;
  color: #fff;
}
.new-team-content .card-list {
  margin: 37px auto 0;
  width: 950px;
  display: flex;
  justify-content: space-around;
}
.new-team-content .card-list .card-li {
  width: 282px;
  height: 312px;
  background: #fff;
  border-radius: 9px;
  padding: 35px 15px 26px;
  text-align: center;
  position: relative;
}
.new-team-content .card-list .card-li:only-child {
  width: 356px;
}
.new-team-content .card-list .card-li .type-tit {
  font-size: 20px;
  color: #0e152c;
  font-weight: 600;
}
.new-team-content .card-list .card-li .type-desc {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #8089a4;
}
.new-team-content .card-list .card-li .line {
  margin-top: 20px;
  height: 1px;
  width: 100%;
  background-color: #f3f4f8;
}
.new-team-content .card-list .card-li .price {
  margin-top: 45px;
  font-size: 32px;
  color: #4db467;
  font-weight: 600;
}
.new-team-content .card-list .card-li .price span {
  font-size: 16px;
  color: #4db467;
}
.new-team-content .card-list .card-li .other {
  margin-top: 14px;
  font-size: 14px;
  color: #8089a4;
}
.new-team-content .card-list .card-li .other b {
  color: #0e152c;
}
.new-team-content .card-list .card-li .type-explain {
  margin-top: 21px;
  font-size: 14px;
  font-weight: 600;
  color: #0e152c;
}
.new-team-content .card-list .card-li .type-explain:first-of-type {
  margin-top: 36px;
}
.new-team-content .card-list .card-li .usage {
  position: absolute;
  bottom: 94px;
  left: 0;
  width: 100%;
  font-size: 14px;
  color: #0e152c;
  cursor: pointer;
}
.new-team-content .card-list .card-li .usage i {
  margin-left: 5px;
  font-size: 16px;
  color: #4db467;
  cursor: pointer;
}
.new-team-content .card-list .card-li .btn {
  width: 204px;
  height: 46px;
  border: 1px solid #4f8aff;
  border-radius: 6px;
  text-align: center;
  line-height: 44px;
  font-size: 14px;
  color: #4d73ec;
  transition: 0.3s;
}
.new-team-content .card-list .card-li .btn.on,
.new-team-content .card-list .card-li .btn:hover {
  background-color: #4d73ec;
  color: #fff;
}
.new-team-content .card-list .card-li .desc {
  margin-top: 20px;
  font-size: 14px;
  color: #0e152c;
}
.new-team-content .card-list .card-li .desc:first-of-type {
  margin-top: 28px;
}
.new-team-content .card-list .card-li .desc .price {
  font-size: 16px;
  margin-left: 15px;
  vertical-align: -4px;
}
.new-team-content .card-list .card-li .desc .price b {
  font-size: 28px;
}
.new-team-content .card-list .card-li .pdf {
  margin-top: 24px;
  display: block;
  font-size: 14px;
  color: #4d73ec;
  cursor: pointer;
}
.new-team-content .card-list .card-li .pdf + .desc {
  margin-top: 26px;
}
.new-team-content .buy-explain {
  margin: 56px auto 0;
  width: 756px;
  text-align: left;
}
.new-team-content .buy-explain img.fl {
  width: 294px;
  margin-right: 107px;
}
.new-team-content .buy-explain .bw-tit {
  padding-top: 58px;
  font-size: 26px;
  font-weight: 600;
  color: #0e152c;
}
.new-team-content .buy-explain .bw-desc {
  margin: 20px 0 26px;
  font-size: 20px;
  color: #434a5f;
}
.new-team-content .buy-explain .btn-view {
  width: 204px;
  height: 46px;
  background: #fff;
  border-radius: 6px;
  line-height: 46px;
  font-size: 14px;
  color: #4d73ec;
  transition: 0.3s;
}
.new-team-content .buy-explain .btn-view:hover {
  background-color: #4d73ec;
  color: #fff;
}
.new-team-content .subtitle {
  text-align: center;
  padding: 50px 0 40px;
  font-size: 30px;
  color: #0e152c;
  letter-spacing: 1px;
}
.new-team-content .table {
  margin: 0 auto;
  width: 1034px;
  border: 1px solid #d4d7de;
  overflow: hidden;
  border-radius: 9px;
}
.new-team-content .table.fixed {
  position: fixed;
  top: 70px;
  left: 50%;
  margin-left: -600px;
  border-radius: 0;
}
.new-team-content .table table {
  width: 100%;
}
.new-team-content .table .thead > div {
  float: left;
  height: 150px;
}
.new-team-content .table .thead .td3 {
  margin-left: 516px;
}
.new-team-content .table tbody td {
  border-top: 1px solid #d4d7de;
}
.new-team-content .table table td {
  vertical-align: middle;
  min-height: 66px;
}
.new-team-content .table .thead,
.new-team-content .table table tr:nth-of-type(2n) td {
  background-color: #f2f4f8;
}
.new-team-content .table .td1 {
  width: 80px;
  padding: 0 32px;
  font-size: 16px;
  color: #0e152c;
  line-height: 22px;
  font-weight: 600;
  border-right: 1px solid #d4d7de;
  background-color: #dfe3ea !important;
  text-align: center;
}
.new-team-content .table .td2 {
  width: 480px;
  padding-left: 35px;
  padding-right: 89px;
}
.new-team-content .table .td2,
.new-team-content .table .td3 {
  border-right: 1px solid #d4d7de;
  font-size: 14px;
  color: #0e152c;
  text-align: left;
  line-height: 20px;
}
.new-team-content .table .td3 {
  width: 475px;
  font-weight: 500;
  padding: 26px 0 26px 43px;
}
.new-team-content .table .td3 span {
  color: #4db467;
}
.new-team-content .table .td3 a {
  font-size: 14px;
  font-weight: 400;
  text-decoration: underline;
  color: #2b51c8;
}
.new-team-content .table .td3 a:hover {
  color: #3d69f3;
}
.new-team-content .table .thead .type-tit {
  font-size: 16px;
  font-weight: 600;
  color: #0e152c;
  margin-bottom: 20px;
}
.new-team-content .table .thead .td3 {
  border-right: none;
}
.new-team-content .table .thead .td3 .type-tit {
  margin-bottom: 20px;
  padding-top: 23px;
}
.new-team-content .table .thead .go-buy {
  width: 186px;
  height: 44px;
  background: #fff;
  border-radius: 6px;
  line-height: 44px;
  font-size: 14px;
  color: #4d73ec;
  transition: 0.3s;
}
.new-team-content .table .thead .go-buy.on,
.new-team-content .table .thead .go-buy:hover {
  background: #4f8aff;
  color: #fff;
}
.new-team-content .division {
  display: block;
  margin: 10px auto 0;
  height: 194px;
}
.new-team-content .auth-con {
  margin: -76px auto 0;
  padding-top: 54px;
  height: 650px;
  background: url(https://pic.51ifonts.com/images/team/gradient.jpg) no-repeat
    top;
  background-size: 100% 100%;
  text-align: center;
}
.new-team-content .auth-con .auth-desc {
  margin: -17px 0 40px;
  font-size: 14px;
  color: #6b7484;
}
.new-team-content .auth-con .flex-box {
  display: flex;
  margin: 0 auto;
  width: 1140px;
  justify-content: space-between;
}
.new-team-content .auth-con .fb-con {
  width: 534px;
}
.new-team-content .auth-con .fb-con .box {
  width: 534px;
  height: 360px;
  background: #fff;
  border-radius: 9px;
  padding: 29px 0;
  text-align: center;
}
.new-team-content .auth-con .fb-con .auth-pic {
  height: 302px;
  cursor: pointer;
}
.new-team-content .auth-con .fb-con .auth-tit {
  margin-top: 25px;
  font-size: 14px;
  color: #4c72ec;
  font-weight: 600;
  cursor: pointer;
}
.new-team-content .member-fonts .font-li {
  float: left;
  width: 265px;
  margin: 0 16px 32px 0;
  box-shadow: 0 0 6px 0 #bbb;
  border-radius: 4px;
}
.new-team-content .member-fonts .font-li:nth-of-type(4n) {
  margin-right: 0;
}
.new-team-content .member-fonts .font-li .img-box {
  width: 100%;
  height: 175px;
  text-align: center;
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}
.new-team-content .member-fonts .font-li .img-box img {
  width: 100%;
  height: 100%;
}
.new-team-content .member-fonts .font-li .show-font {
  width: 100%;
  height: 100%;
  line-height: 186px;
  text-align: center;
  font-size: 54px;
  color: #fff;
  padding: 0 10px;
  background: url(https://pic.51ifonts.com/images/common/black-bg.jpg);
}
.new-team-content .member-fonts .font-li .font-name {
  height: 55px;
  background: #f8f9fb;
  line-height: 55px;
  padding: 0 22px;
  text-align: left;
  font-size: 25px;
  color: #0e152c;
}
.new-team-content .member-fonts .show-more {
  width: 116px;
  height: 34px;
  background: #eef0f5;
  border-radius: 17px;
  line-height: 34px;
  font-size: 14px;
  color: #0e152c;
  transition: 0.3s;
}
.new-team-content .member-fonts .show-more:hover {
  background: #4f8aff;
  color: #fff;
}
.new-team-content .member-manage {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-bottom: 43px;
}
.new-team-content .member-manage .mm-bg {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 324px;
  background: #0e152c;
}
.new-team-content .member-manage .mm-box {
  margin: 14px auto 0;
  width: 1106px;
  height: 606px;
  border: 3px solid #0e152c;
  border-radius: 14px;
  background-color: #f2f4f9;
  padding: 27px 32px 0;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.new-team-content .member-manage .mm-box:before {
  position: absolute;
  content: '';
  top: -16px;
  left: -132px;
  width: 180px;
  height: 194px;
  background: url(https://pic.51ifonts.com/images/team/left-person.png)
    no-repeat;
  background-size: 100% auto;
  animation: huang 0.5s ease-in-out infinite alternate;
  transform-origin: 30% 50%;
}
.new-team-content .member-manage .mm-box:after {
  position: absolute;
  content: '';
  top: -98px;
  right: -42px;
  width: 96px;
  height: 129px;
  background: url(https://pic.51ifonts.com/images/team/right-person.png)
    no-repeat;
  background-size: 100% auto;
  animation: huang 0.5s ease-in-out infinite alternate;
}
.new-team-content .member-manage .fl-con {
  width: 735px;
  height: 549px;
  padding: 50px 2px 0;
  background: url(https://pic.51ifonts.com/images/team/kuang.jpg) no-repeat top;
  background-size: 100%;
}
.new-team-content .member-manage .fl-con .url {
  padding-left: 53px;
  line-height: 28px;
  font-size: 14px;
  color: #0e152c;
  margin-bottom: 8px;
}
.new-team-content .member-manage .fl-con img {
  width: 100%;
}
.new-team-content .member-manage .fr-con {
  width: 280px;
}
.new-team-content .member-manage .fr-con .type-box {
  width: 280px;
  height: 260px;
  background: #fff;
  border-radius: 10px;
  padding: 55px 38px 0;
  color: #0e152c;
  text-align: center;
  cursor: pointer;
}
.new-team-content .member-manage .fr-con .type-box.on {
  background: #4c72ec;
  color: #fff;
}
.new-team-content .member-manage .fr-con .type-box:first-of-type {
  margin-bottom: 30px;
}
.new-team-content .member-manage .type-box .iconfont {
  font-size: 44px;
}
.new-team-content .member-manage .type-box .tb-tit {
  margin-top: 15px;
  font-size: 18px;
  font-weight: 600;
}
.new-team-content .member-manage .type-box .tb-desc {
  margin-top: 20px;
  font-size: 14px;
  text-align: left;
  line-height: 23px;
  color: #868fa8;
}
.new-team-content .member-manage .type-box.on .tb-desc {
  color: #fff;
}
.new-team-content .invoice-box {
  width: 1112px;
  margin: 112px auto 98px;
}
.new-team-content .invoice-box img.fr {
  width: 413px;
}
.new-team-content .invoice-box .ib-tit {
  font-size: 30px;
  color: #0e152c;
  font-weight: 700;
}
.new-team-content .invoice-box .ib-desc {
  margin: 16px 0 26px;
  font-size: 18px;
  color: #434a5f;
}
.new-team-content .invoice-box .go-buy {
  width: 204px;
  height: 46px;
  border: 1px solid #4c72ec;
  border-radius: 6px;
  line-height: 46px;
  font-size: 14px;
  color: #4c72ec;
  transition: 0.3s;
}
.new-team-content .invoice-box .go-buy:hover {
  background: #4f8aff;
  color: #fff;
}
.new-team-content .bg-gray {
  width: 100%;
  background: #fff;
  height: 687px;
  text-align: center;
}
.new-team-content .qa-li {
  float: left;
  width: 46%;
  margin-bottom: 70px;
  padding-left: 32px;
}
.new-team-content .qa-li:nth-of-type(odd) {
  margin-right: 8%;
}
.new-team-content .qa-li .ql-q {
  line-height: 18px;
  margin-bottom: 16px;
  font-size: 16px;
  color: #0e152c;
  font-weight: 600;
}
.new-team-content .qa-li .ql-a {
  line-height: 30px;
  font-size: 14px;
  color: #6d7483;
}
.new-team-content .qa-li .q-icon {
  background: #4d73ec;
}
.new-team-content .qa-li .a-icon,
.new-team-content .qa-li .q-icon {
  margin-left: -32px;
  float: left;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  text-align: center;
  line-height: 18px;
  font-size: 12px;
  color: #fff;
}
.new-team-content .qa-li .a-icon {
  margin-top: 7px;
  background: #69d284;
}
.new-team-content .view-more {
  width: 119px;
  height: 30px;
  background: #fff;
  border: 1px solid #4d73ec;
  border-radius: 15px;
  line-height: 28px;
  font-size: 14px;
  color: #4d73ec;
}
.new-team-content .fadeInUp {
  opacity: 0;
  animation: fadeInUp 0.5s linear forwards;
}
.new-team-content .fadeInUp1 {
  opacity: 0;
  animation: fadeInUp 0.2s linear forwards;
}
.new-team-content .animated {
  opacity: 0;
}
.new-team-content .delay {
  animation-delay: 0.2s;
}
.new-team-content .delay2 {
  animation-delay: 0.6s;
}
.new-team-content .delay3 {
  animation-delay: 1s;
}
.new-team-content .enterpriseExamples {
  background-color: #f2f4f9;
  padding: 44px 0 47px;
  text-align: center;
}
.new-team-content .enterpriseExamples > h3 {
  font-size: 29px;
  font-weight: 500;
  color: #0e152c;
  margin-bottom: 37px;
}
.new-team-content .enterpriseExamples > div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 1150px;
  width: 1199px;
  margin: 0 auto;
}
.new-team-content .enterpriseExamples > div > div {
  width: 284px;
  padding: 7px 7px 0;
  background-color: #fff;
}
.new-team-content .enterpriseExamples > div > div .enterpriseExamples-img {
  width: 100%;
}
.new-team-content .enterpriseExamples > div > div .enterpriseExamples-icon {
  height: 67px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.new-team-content .anchor {
  position: absolute;
  top: -70px;
}
.new-team-content .service-tip {
  position: fixed;
  bottom: 200px;
  right: 100px;
  width: 172px;
  height: 42px;
  background: #f8faff;
  border: 1px solid #4d73ec;
  border-radius: 0 21px 21px 0;
  text-align: center;
  line-height: 42px;
  font-size: 14px;
  font-weight: 400;
  color: #2f57d4;
  z-index: 10;
  cursor: pointer;
}
.new-team-content .service-tip .service-tip-header {
  width: 51px;
  height: 51px;
  background: #fff;
  border: 1px solid #3057d4;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-60%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.new-team-content .service-tip .service-tip-header > i {
  font-size: 30px;
  position: relative;
  top: -2px;
}
.promotion-index .islide-btn {
  font-size: 20px;
  font-weight: 700;
  padding: 6px 18px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 20px;
}
.promotion-index .islide-btn:hover {
  background: #e26e56;
  border-color: #e26e56;
}
.promotion-index .activity-banner {
  height: 22.19vw;
  cursor: pointer;
  background-size: cover;
}
.promotion-index .banner {
  width: 100%;
  height: 21.7vw;
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 4.2vw 0 0 22.3vw;
  cursor: pointer;
}
.promotion-index .banner .title {
  font-size: 28px;
  line-height: 40px;
  position: relative;
  width: 427px;
}
.promotion-index .banner .title .tip {
  text-align: center;
  width: 85px;
  height: 20px;
  background: #fff;
  border: 1px solid #0058ff;
  color: #0058ff;
  font-size: 12px;
  line-height: 20px;
  position: absolute;
  top: -15px;
  right: 18px;
  border-radius: 5px 5px 5px 0;
}
.promotion-index .title .tip:after {
  position: absolute;
  content: '';
  bottom: -6px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-left: 7px solid #fff;
  border-bottom: 7px solid transparent;
}
.promotion-index .title .tip:before {
  position: absolute;
  content: '';
  bottom: -8px;
  left: -1px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-left: 8px solid #0058ff;
  border-bottom: 8px solid transparent;
}
.promotion-index .banner .sub-title {
  font-size: 46px;
  font-weight: 700;
  color: #202937;
  line-height: 46px;
  margin-top: 27px;
}
.promotion-index .banner .sub-title span {
  color: #345fef;
}
.promotion-index .hint {
  font-size: 16px;
  line-height: 22px;
  margin-top: 20px;
}
.promotion-index .hint .blue {
  color: #0058ff;
  font-weight: 500;
}
.promotion-index .hint .bj {
  font-size: 12px;
  line-height: 17px;
  background: #e3eaff;
  border-radius: 10px;
  padding: 2px 14px;
  margin-left: 13px;
}
.promotion-index .btn {
  width: 261px;
  height: 56px;
  background: linear-gradient(270deg, #285dff, #3761f7);
  border-radius: 28px;
  padding: 15px 77px 16px 74px;
  display: inline-flex;
  margin: 29px auto 0;
}
.promotion-index .btn:hover {
  background: linear-gradient(90deg, #0032f7, #0085fe);
}
.promotion-index .btn .iconfont {
  font-size: 25px;
  color: #fff;
  line-height: 20px;
}
.promotion-index .btn .text {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  line-height: 25px;
  margin-left: 12px;
}
.promotion-index2 .banner {
  text-align: center;
  padding-top: 56px;
  height: 550px;
  background-color: #f4f5f7;
  margin-bottom: 411px;
}
.promotion-index2 .banner .title {
  font-size: 28px;
  line-height: 40px;
  width: 427px;
  margin: 0 auto;
  position: relative;
}
.promotion-index2 .banner .title .tip {
  width: 85px;
  height: 20px;
  background: #fff;
  border: 1px solid #0058ff;
  color: #0058ff;
  font-size: 12px;
  line-height: 20px;
  position: absolute;
  top: -15px;
  right: -32px;
  border-radius: 5px 5px 5px 0;
}
.promotion-index2 .title .tip:after {
  position: absolute;
  content: '';
  bottom: -6px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-left: 7px solid #fff;
  border-bottom: 7px solid transparent;
}
.promotion-index2 .title .tip:before {
  position: absolute;
  content: '';
  bottom: -8px;
  left: -1px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-left: 8px solid #0058ff;
  border-bottom: 8px solid transparent;
}
.promotion-index2 .banner .sub-title {
  font-size: 46px;
  font-weight: 700;
  color: #202937;
  line-height: 46px;
  margin-top: 23px;
}
.promotion-index2 .banner .sub-title span {
  color: #345fef;
}
.promotion-index2 .hint {
  font-size: 16px;
  line-height: 22px;
  margin-top: 16px;
}
.promotion-index2 .hint .blue {
  color: #0058ff;
  font-weight: 500;
}
.promotion-index2 .hint .bj {
  font-size: 12px;
  background: #e3eaff;
  border-radius: 10px;
  padding: 2px 14px;
  margin-left: 13px;
}
.promotion-index2 .btn {
  width: 320px;
  height: 56px;
  background: linear-gradient(270deg, #285dff, #3761f7);
  border-radius: 28px;
  padding: 15px 105px 15px 108px;
  display: flex;
  margin: 20px auto 0;
  cursor: pointer;
}
.promotion-index2 .btn:hover {
  background: linear-gradient(90deg, #0032f7, #0085fe);
}
.promotion-index2 .btn .iconfont {
  font-size: 25px;
  color: #fff;
  line-height: 20px;
}
.promotion-index2 .btn .text {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  line-height: 25px;
  margin-left: 9px;
}
.promotion-index2 .course {
  margin: 36px auto 30px;
  width: 1191px;
  height: 457px;
  background: #202937;
  border-radius: 12px;
}
.promotion-index2 video {
  width: 100%;
  height: 457px;
  border-radius: 12px;
}
.promotion-index2 .sub-banner {
  width: 1200px;
  height: 157px;
  margin: 0 auto;
}
.promotion-index2 .sub-banner img {
  width: 100%;
  height: 100%;
}
.promotion-component-content {
  width: 100%;
  text-align: center;
}
.promotion-component-content .item-content {
  padding: 41px 0 56px;
}
.promotion-component-content .item-content .title {
  color: #202937;
  font-size: 28px;
  line-height: 40px;
  font-weight: 600;
}
.promotion-component-content .item-content .sub-title {
  color: #8093a9;
  font-size: 14px;
  line-height: 20px;
  margin-top: 14px;
}
.promotion-component-content .item-content:nth-child(2) {
  background: #f6f9fb;
  padding-bottom: 49px;
}
.promotion-component-content .item-content:last-child {
  padding-bottom: 96px;
}
.promotion-component-content .item-content:last-child .btn {
  padding-left: 73px;
}
.promotion-component-content .item-content:last-child .sub-title {
  margin-top: 8px;
}
.promotion-component-content .item-content .list {
  margin: 41px auto 37px;
  width: 1200px;
}
.promotion-component-content .item-content .list img {
  width: 281px;
  height: 459px;
  overflow: hidden;
  border-radius: 8px;
  margin: 0 22px 32px 0;
  box-shadow: 1px 3px 10px 0 #d3dcde;
}
.promotion-component-content
  .item-content
  .list
  .list-img:nth-child(4n + 4)
  img {
  margin-right: 0;
}
.promotion-component-content .item-content .list .list-img .btn {
  position: absolute;
  width: 247px;
  height: 54px;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  border-radius: 33px;
  top: 325px;
  left: 14px;
  padding: 16px 40px 16px 51px;
}
.promotion-component-content .item-content .list .list-img:hover .mask {
  display: block;
}
.promotion-component-content .list .mask {
  width: 281px;
  height: 459px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.33);
  border-radius: 8px;
  display: none;
}
.promotion-component-content .item-content .list .list-img .btn .text {
  margin-left: 0;
}
.promotion-component-content .item-content .btn {
  width: 352px;
  height: 54px;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  border-radius: 33px;
  margin: 0 auto;
  padding: 14px 81px 18px 93px;
  display: flex;
  cursor: pointer;
}
.promotion-component-content .btn .iconfont {
  font-size: 25px;
  color: #fff;
  line-height: 20px;
}
.promotion-component-content .btn .text {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: 22px;
  margin-left: 11px;
}
.promotion-component-content .item-content img {
  width: 1201px;
  cursor: pointer;
  margin-top: 30px;
  margin-bottom: 55px;
}
.promotion-component-content .item-content .tab {
  display: flex;
  justify-content: center;
  margin-top: 42px;
}
.promotion-component-content .item-content:nth-child(2) img {
  margin-bottom: 31px;
}
.promotion-component-content .item-content .tab .tab-item:first-child {
  opacity: 0.68;
  margin-left: 0;
}
.promotion-component-content .item-content .tab .tab-item {
  width: 252px;
  height: 71px;
  background: #fff;
  box-shadow: 1px 3px 10px 0 #d3dcde;
  border-radius: 36px;
  border: 1px solid #ecf1f5;
  font-size: 18px;
  color: #333;
  line-height: 71px;
  cursor: pointer;
  margin-left: 86px;
  font-weight: 500;
}
.question-content {
  background: #fff;
  padding-bottom: 108px;
}
.question-content .banner {
  height: 243px;
  width: 100%;
  background: #0538fe
    url(https://pic.51ifonts.com/images/question/question-bg.jpg) no-repeat top;
  background-size: auto 243px;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.question-content .banner .title {
  padding-top: 95px;
  font-size: 38px;
  color: #fff;
  letter-spacing: 2px;
}
.question-content .banner .icon-xt {
  position: absolute;
  top: 89.5px;
  left: 50%;
  margin-left: -402px;
  width: 58px;
  height: 58px;
  background: url(https://pic.51ifonts.com/images/question/xt.png) no-repeat;
  background-size: 100%;
  z-index: 2;
  animation: rotate 3s infinite alternate-reverse;
  transform-origin: -330px -400px;
}
.question-content .banner .icon-sjx {
  position: absolute;
  top: 36.5px;
  right: 50%;
  margin-right: -640px;
  width: 66px;
  height: 60px;
  background: url(https://pic.51ifonts.com/images/question/sjx.png) no-repeat;
  background-size: 100%;
  z-index: 2;
  animation: larger 6s infinite alternate-reverse;
}
@keyframes larger {
  0% {
    transform: scale(1.2) rotate(0deg);
  }
  to {
    transform: scale(0.6) rotate(1turn);
  }
}
.question-content .banner .icon-circle {
  position: absolute;
  top: 64px;
  right: 50%;
  margin-right: -600px;
  width: 73px;
  height: 73px;
  background: url(https://pic.51ifonts.com/images/question/circle.png) no-repeat;
  background-size: 100%;
  z-index: 1;
}
.question-content .nav {
  height: 70px;
  background-color: #f4f6f9;
  text-align: center;
  line-height: 67px;
}
.question-content .nav.fixed {
  position: fixed;
  top: 70px;
  left: 0;
  width: 100%;
  z-index: 101;
}
.question-content .nav .nav-li {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  color: #555;
  margin-right: 64px;
  padding: 0 5px;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
.question-content .nav a:last-of-type .nav-li {
  margin-right: 0;
}
.question-content .nav .nav-li.on,
.question-content .nav .nav-li:hover {
  color: #1f2837;
  border-bottom-color: #003ff5;
}
.question-content .subtitle {
  line-height: 70px;
  font-size: 18px;
  color: #1f2837;
}
.question-content .qa-li {
  margin-bottom: 22px;
  width: 100%;
  background: #f4f6f9;
  border: 1px solid #e4e6eb;
  border-radius: 10px;
  padding: 20px 68px;
}
.question-content .qa-li .ql-q {
  margin-bottom: 13px;
  line-height: 20px;
  font-size: 16px;
  color: #1f2837;
}
.question-content .qa-li .ql-a {
  line-height: 20px;
  font-size: 14px;
  color: #666e7a;
}
.question-content .qa-li .q {
  background: linear-gradient(0deg, #0032f7, #0085fe);
}
.question-content .qa-li .a,
.question-content .qa-li .q {
  float: left;
  margin-left: -30px;
  width: 19px;
  height: 19px;
  border-radius: 5px;
  text-align: center;
  line-height: 19px;
  font-size: 12px;
  color: #fff;
}
.question-content .qa-li .a {
  background: linear-gradient(0deg, #d36f4b, #ef9c75);
}
.search-content {
  background-color: #f6f8fa;
  padding-bottom: 100px;
}
.search-content .top-nav {
  background-color: #fff;
  padding-bottom: 52px;
}
.search-content .top-nav .router {
  padding: 20px 0;
  font-size: 12px;
  color: #676e7a;
  letter-spacing: 1px;
}
.search-content .router .keywords {
  padding: 0 10px;
  height: 24px;
  border: 1px dashed #185bf7;
  font-size: 12px;
  color: #185bf8;
  line-height: 22px;
  white-space: nowrap;
  position: relative;
}
.search-content .router .keywords .icon-guanbi4 {
  position: absolute;
  top: -5px;
  right: -8px;
  z-index: 2;
  font-size: 14px;
  color: #185bf8;
  cursor: pointer;
}
.search-content .top-nav .main-title {
  text-align: center;
  font-size: 28px;
  color: #000;
}
.search-content .top-nav .main-title span {
  position: relative;
  z-index: 1;
}
.search-content .top-nav .main-title span:before {
  position: absolute;
  content: '';
  z-index: -1;
  top: 10px;
  right: -36px;
  width: 53px;
  height: 53px;
  background: url(https://pic.51ifonts.com/images/search/sou-tit.png) no-repeat
    top;
  background-size: 100%;
}
.search-content .top-nav .info {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  color: #b7b7b8;
  position: relative;
  z-index: 1;
}
.search-content .top-nav .info b {
  margin: 0 5px;
  color: #185bf7;
}
.search-content .operate-menu {
  margin: 30px 0 28px;
  position: relative;
  height: 37px;
}
.search-content .operate-menu .preview-box {
  float: left;
  height: 36px;
  display: flex;
  justify-content: start;
  position: relative;
}
.search-content .preview-box .preview-input {
  width: 500px;
  height: 100%;
  border: 1px solid #eef1f5;
  border-right: none;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
  color: #333;
}
.search-content .preview-box .btn-more {
  border: 1px solid #eef1f5;
  border-left: none;
  width: 50px;
  text-align: center;
  background-color: #fff;
  height: 100%;
  line-height: 36px;
}
.search-content .preview-box .btn-more i {
  color: #a6a6a6;
  font-size: 14px;
}
.search-content .preview-box .btn-more:hover i {
  color: #185bf7;
}
.search-content .preview-box .btn-preview {
  width: 95px;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background-color: #4d4d4d;
  text-align: center;
  line-height: 36px;
  font-size: 14px;
  color: #fff;
}
.search-content .preview-box .btn-preview:hover {
  background-color: #000;
}
.search-content .preview-box .drop-down {
  position: absolute;
  top: 36px;
  left: 0;
  z-index: 3;
  background-color: #fff;
  box-shadow: 0 0 9px 0 rgba(235, 239, 243, 0.67);
  width: 550px;
  padding: 5px 0;
}
.search-content .preview-box .drop-down .select-li {
  width: 100%;
  height: 36px;
  line-height: 36px;
  text-align: left;
  padding-left: 18px;
  font-size: 12px;
  color: #333;
  cursor: pointer;
}
.search-content .preview-box .drop-down .select-li.on,
.search-content .preview-box .drop-down .select-li:hover {
  color: #185bf8;
  background: #f6f8fa;
}
.search-content .menu-style {
  float: left;
  margin: 6px 24px 6px 368px;
  line-height: 24px;
  height: 24px;
}
.search-content .menu-style i {
  vertical-align: middle;
  font-size: 24px;
  color: #d2d2d2;
  cursor: pointer;
}
.search-content .menu-style i:first-of-type {
  margin-right: 5px;
}
.search-content .menu-style i.on {
  color: #0f0f0f;
}
.search-content .sort-style {
  float: right;
}
.search-content .page-box {
  margin-top: 46px;
  display: flex;
  justify-content: center;
}
.team-content {
  background-color: #fff;
}
.team-content .btn-hover2,
.team-content .btn-hover:hover {
  background-color: #4d73ec !important;
  color: #fff !important;
  transition: 0.3s;
}
.team-content .btn-hover2:hover {
  background-color: #3d69f3 !important;
}
.team-content .MuiButtonBase-root {
  padding: 0;
}
.team-content .banner {
  height: 1014px;
  background: #0e152c url(https://pic.51ifonts.com/images/team/banner-bg.png)
    no-repeat top;
  background-size: auto 470px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.team-content .banner .bg {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 544px;
  background-color: #eef0f5;
}
.team-content .banner .title {
  padding: 40px 0;
  font-size: 36px;
  color: #4a73f6;
  font-weight: 700;
  letter-spacing: 1px;
}
.team-content .banner .tab-box {
  margin: 0 auto;
  width: 400px;
  height: 55px;
  background-color: #fff;
  border-radius: 28px;
  padding: 2px;
  position: relative;
  z-index: 1;
}
.team-content .banner .tab-box:before {
  position: absolute;
  content: '';
  top: 2px;
  left: 2px;
  width: 148px;
  height: 51px;
  border-radius: 28px;
  background-color: #6187ff;
  z-index: -1;
  transition: 0.3s;
}
.team-content .banner .tab-box.move:before {
  left: 150px;
  width: calc(100% - 152px);
}
.team-content .tab-box .tab-li {
  display: inline-block;
  min-width: 148px;
  height: 100%;
  border-radius: 28px;
  text-align: center;
  line-height: 51px;
  font-size: 16px;
  font-weight: 700;
  color: #0e152c;
  cursor: pointer;
  transition: 0.3s;
}
.team-content .tab-box .tab-li:last-of-type {
  width: calc(100% - 148px);
}
.team-content .tab-box .tab-li.on {
  color: #fff;
}
.team-content .priv-list {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
.team-content .priv-list .priv-li {
  margin: 0 15px;
  width: 200px;
  height: 72px;
  background: #161e37;
  border-radius: 36px;
  text-align: center;
}
.team-content .priv-list .priv-li .tit {
  padding: 18px 0 10px;
  font-size: 20px;
  color: #fff;
  font-weight: 600;
}
.team-content .priv-list .priv-li .expire {
  font-size: 12px;
  color: #fff;
}
.team-content .card-list {
  margin: 37px auto 0;
  width: 950px;
  display: flex;
  justify-content: space-around;
}
.team-content .card-list .card-li {
  width: 282px;
  height: 376px;
  background: #fff;
  border-radius: 9px;
  padding: 35px 15px 26px;
  text-align: center;
  position: relative;
}
.team-content .card-list .card-li:only-child {
  width: 356px;
}
.team-content .card-list .card-li .type-tit {
  font-size: 20px;
  color: #0e152c;
  font-weight: 600;
}
.team-content .card-list .card-li .type-desc {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #8089a4;
}
.team-content .card-list .card-li .line {
  margin-top: 20px;
  height: 1px;
  width: 100%;
  background-color: #f3f4f8;
}
.team-content .card-list .card-li .price {
  margin-top: 45px;
  font-size: 32px;
  color: #4db467;
  font-weight: 600;
}
.team-content .card-list .card-li .price span {
  font-size: 16px;
  color: #4db467;
}
.team-content .card-list .card-li .other {
  margin-top: 14px;
  font-size: 14px;
  color: #8089a4;
}
.team-content .card-list .card-li .other b {
  color: #0e152c;
}
.team-content .card-list .card-li .type-explain {
  margin-top: 21px;
  font-size: 14px;
  font-weight: 600;
  color: #0e152c;
}
.team-content .card-list .card-li .type-explain:first-of-type {
  margin-top: 36px;
}
.team-content .card-list .card-li .usage {
  position: absolute;
  bottom: 94px;
  left: 0;
  width: 100%;
  font-size: 14px;
  color: #0e152c;
  cursor: pointer;
}
.team-content .card-list .card-li .usage i {
  margin-left: 5px;
  font-size: 16px;
  color: #4db467;
  cursor: pointer;
}
.team-content .card-list .card-li .btn {
  width: 204px;
  height: 46px;
  border: 1px solid #4f8aff;
  border-radius: 6px;
  text-align: center;
  line-height: 44px;
  font-size: 14px;
  color: #4d73ec;
  transition: 0.3s;
}
.team-content .card-list .card-li .btn.on,
.team-content .card-list .card-li .btn:hover {
  background-color: #4d73ec;
  color: #fff;
}
.team-content .card-list .card-li .desc {
  margin-top: 20px;
  font-size: 14px;
  color: #0e152c;
}
.team-content .card-list .card-li .desc:first-of-type {
  margin-top: 28px;
}
.team-content .card-list .card-li .desc .price {
  font-size: 16px;
  margin-left: 15px;
  vertical-align: -4px;
}
.team-content .card-list .card-li .desc .price b {
  font-size: 28px;
}
.team-content .card-list .card-li .pdf {
  margin-top: 24px;
  display: block;
  font-size: 14px;
  color: #4d73ec;
  cursor: pointer;
}
.team-content .card-list .card-li .pdf + .desc {
  margin-top: 26px;
}
.team-content .buy-explain {
  margin: 56px auto 0;
  width: 756px;
  text-align: left;
}
.team-content .buy-explain img.fl {
  width: 294px;
  margin-right: 107px;
}
.team-content .buy-explain .bw-tit {
  padding-top: 58px;
  font-size: 26px;
  font-weight: 600;
  color: #0e152c;
}
.team-content .buy-explain .bw-desc {
  margin: 20px 0 26px;
  font-size: 20px;
  color: #434a5f;
}
.team-content .buy-explain .btn-view {
  width: 204px;
  height: 46px;
  background: #fff;
  border-radius: 6px;
  line-height: 46px;
  font-size: 14px;
  color: #4d73ec;
  transition: 0.3s;
}
.team-content .buy-explain .btn-view:hover {
  background-color: #4d73ec;
  color: #fff;
}
.team-content .subtitle {
  text-align: center;
  padding: 50px 0 40px;
  font-size: 30px;
  color: #0e152c;
  letter-spacing: 1px;
}
.team-content .table {
  margin: 0 auto;
  width: 1200px;
  border: 1px solid #d4d7de;
  box-shadow: 0 1px 4px 0 rgba(238, 240, 245, 0.28);
  border-radius: 9px;
  overflow: hidden;
}
.team-content .table.fixed {
  position: fixed;
  top: 70px;
  left: 50%;
  margin-left: -600px;
  border-radius: 0;
}
.team-content .table table {
  width: 100%;
}
.team-content .table .thead > div {
  float: left;
  height: 150px;
}
.team-content .table .thead .td3 {
  margin-left: 516px;
}
.team-content .table tbody td {
  border-top: 1px solid #d4d7de;
}
.team-content .table table td {
  vertical-align: middle;
  min-height: 66px;
}
.team-content .table .thead,
.team-content .table table tr:nth-of-type(2n) td {
  background-color: #f7f8fa;
}
.team-content .table .td1 {
  width: 80px;
  padding: 0 32px;
  font-size: 16px;
  color: #0e152c;
  line-height: 22px;
  font-weight: 600;
  border-right: 1px solid #d4d7de;
  background-color: #fff !important;
}
.team-content .table .td2 {
  width: 434px;
  border-right: 1px solid #d4d7de;
  padding-left: 35px;
  text-align: left;
  font-size: 14px;
  color: #0e152c;
}
.team-content .table .td2.ml {
  padding-left: 8px;
}
.team-content .table .td2.ml .sm {
  margin-left: 8px;
}
.team-content .table .td2 .sm {
  margin-left: 35px;
  vertical-align: middle;
  display: inline-block;
  width: 291px;
  font-size: 12px;
  line-height: 23px;
}
.team-content .table .td3 {
  width: 306px;
  padding: 26px 0;
  text-align: center;
  border-right: 1px solid #d4d7de;
  font-size: 16px;
  color: #0e152c;
  font-weight: 600;
}
.team-content .table .td4 {
  width: 373px;
  padding: 24px 0;
  text-align: center;
  font-size: 14px;
  color: #0e152c;
  font-weight: 600;
}
.team-content .table .td4 .li {
  text-align: left;
  padding-left: 27px;
}
.team-content .table .td4 .li:first-of-type {
  margin-bottom: 18px;
}
.team-content .table .td4 .li .point {
  vertical-align: middle;
  margin-right: 5px;
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #0e152c;
  border-radius: 50%;
}
.team-content .table .td4 .sm {
  cursor: pointer;
  margin-top: 8px;
  font-size: 12px;
  color: #606472;
  font-weight: 400;
}
.team-content .table .td4 .icon-tick {
  font-size: 16px;
  color: #69d284;
}
.team-content .table .thead .type-tit {
  font-size: 16px;
  font-weight: 600;
  color: #0e152c;
  margin-bottom: 20px;
}
.team-content .table .thead .td3 {
  border-right: none;
}
.team-content .table .thead .td3 .type-tit {
  margin-bottom: 20px;
  padding-top: 23px;
}
.team-content .table .td4 .type-tit {
  margin-bottom: 12px;
}
.team-content .table .td4 .price {
  margin-bottom: 12px;
  font-size: 14px;
  color: #0e152c;
}
.team-content .table .td4 .price b {
  vertical-align: -1px;
  margin-right: 5px;
  font-size: 22px;
  color: #4db067;
}
.team-content .table .thead .go-buy {
  width: 186px;
  height: 44px;
  background: #fff;
  border-radius: 6px;
  line-height: 44px;
  font-size: 14px;
  color: #4d73ec;
  transition: 0.3s;
}
.team-content .table .thead .go-buy.on,
.team-content .table .thead .go-buy:hover {
  background: #4f8aff;
  color: #fff;
}
.team-content .division {
  display: block;
  margin: 10px auto 0;
  height: 194px;
}
.team-content .auth-con {
  margin: -76px auto 0;
  padding-top: 54px;
  height: 650px;
  background: url(https://pic.51ifonts.com/images/team/gradient.jpg) no-repeat
    top;
  background-size: 100% 100%;
  text-align: center;
}
.team-content .auth-con .auth-desc {
  margin: -17px 0 40px;
  font-size: 14px;
  color: #6b7484;
}
.team-content .auth-con .flex-box {
  display: flex;
  margin: 0 auto;
  width: 1140px;
  justify-content: space-between;
}
.team-content .auth-con .fb-con {
  width: 534px;
}
.team-content .auth-con .fb-con .box {
  width: 534px;
  height: 360px;
  background: #fff;
  border-radius: 9px;
  padding: 29px 0;
  text-align: center;
}
.team-content .auth-con .fb-con .auth-pic {
  height: 302px;
  cursor: pointer;
}
.team-content .auth-con .fb-con .auth-tit {
  margin-top: 25px;
  font-size: 14px;
  color: #4c72ec;
  font-weight: 600;
  cursor: pointer;
}
.team-content .member-fonts .desc {
  margin: -20px 0 56px;
  font-size: 14px;
  color: #6b7484;
  text-align: center;
}
.team-content .member-fonts .font-li {
  float: left;
  width: 284px;
  margin: 0 21px 33px 0;
}
.team-content .member-fonts .font-li:nth-of-type(4n) {
  margin-right: 0;
}
.team-content .member-fonts .font-li .img-box {
  width: 100%;
  height: 190px;
  text-align: center;
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}
.team-content .member-fonts .font-li .img-box img {
  width: 100%;
}
.team-content .member-fonts .font-li .show-font {
  width: 100%;
  height: 100%;
  line-height: 186px;
  text-align: center;
  font-size: 54px;
  color: #fff;
  padding: 0 10px;
  background: url(https://pic.51ifonts.com/images/common/black-bg.jpg);
}
.team-content .member-fonts .font-li .font-name {
  height: 60px;
  background: #f8f9fb;
  line-height: 60px;
  padding: 0 22px;
  text-align: left;
  font-size: 32px;
  color: #0e152c;
}
.team-content .member-fonts .show-more {
  width: 116px;
  height: 34px;
  background: #eef0f5;
  border-radius: 17px;
  line-height: 34px;
  font-size: 14px;
  color: #0e152c;
  transition: 0.3s;
}
.team-content .member-fonts .show-more:hover {
  background: #4f8aff;
  color: #fff;
}
.team-content .member-manage {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.team-content .member-manage .mm-bg {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 324px;
  background: #0e152c;
}
.team-content .member-manage .subtitle {
  color: #fff;
}
.team-content .member-manage .mm-box {
  margin: 14px auto 0;
  width: 1106px;
  height: 606px;
  border: 3px solid #0e152c;
  border-radius: 14px;
  background-color: #f2f4f9;
  padding: 27px 32px 0;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.team-content .member-manage .mm-box:before {
  position: absolute;
  content: '';
  top: -16px;
  left: -132px;
  width: 180px;
  height: 194px;
  background: url(https://pic.51ifonts.com/images/team/left-person.png)
    no-repeat;
  background-size: 100% auto;
  animation: huang 0.5s ease-in-out infinite alternate;
  transform-origin: 30% 50%;
}
.team-content .member-manage .mm-box:after {
  position: absolute;
  content: '';
  top: -98px;
  right: -42px;
  width: 96px;
  height: 129px;
  background: url(https://pic.51ifonts.com/images/team/right-person.png)
    no-repeat;
  background-size: 100% auto;
  animation: huang 0.5s ease-in-out infinite alternate;
}
@keyframes huang {
  0% {
    transform: rotate(-3deg);
  }
  to {
    transform: rotate(3deg);
  }
}
.team-content .member-manage .fl-con {
  width: 735px;
  height: 549px;
  padding: 50px 2px 0;
  background: url(https://pic.51ifonts.com/images/team/kuang.jpg) no-repeat top;
  background-size: 100%;
}
.team-content .member-manage .fl-con .url {
  padding-left: 53px;
  line-height: 28px;
  font-size: 14px;
  color: #0e152c;
  margin-bottom: 8px;
}
.team-content .member-manage .fl-con img {
  width: 100%;
}
.team-content .member-manage .fr-con {
  width: 280px;
}
.team-content .member-manage .fr-con .type-box {
  width: 280px;
  height: 260px;
  background: #fff;
  border-radius: 10px;
  padding: 55px 38px 0;
  color: #0e152c;
  text-align: center;
  cursor: pointer;
}
.team-content .member-manage .fr-con .type-box.on {
  background: #4c72ec;
  color: #fff;
}
.team-content .member-manage .fr-con .type-box:first-of-type {
  margin-bottom: 30px;
}
.team-content .member-manage .type-box .iconfont {
  font-size: 44px;
}
.team-content .member-manage .type-box .tb-tit {
  margin-top: 15px;
  font-size: 18px;
  font-weight: 600;
}
.team-content .member-manage .type-box .tb-desc {
  margin-top: 20px;
  font-size: 14px;
  text-align: left;
  line-height: 23px;
  color: #868fa8;
}
.team-content .member-manage .type-box.on .tb-desc {
  color: #fff;
}
.team-content .invoice-box {
  width: 1112px;
  margin: 112px auto 98px;
}
.team-content .invoice-box img.fr {
  width: 413px;
}
.team-content .invoice-box .ib-tit {
  font-size: 30px;
  color: #0e152c;
  font-weight: 700;
}
.team-content .invoice-box .ib-desc {
  margin: 16px 0 26px;
  font-size: 18px;
  color: #434a5f;
}
.team-content .invoice-box .go-buy {
  width: 204px;
  height: 46px;
  border: 1px solid #4c72ec;
  border-radius: 6px;
  line-height: 46px;
  font-size: 14px;
  color: #4c72ec;
  transition: 0.3s;
}
.team-content .invoice-box .go-buy:hover {
  background: #4f8aff;
  color: #fff;
}
.team-content .bg-gray {
  width: 100%;
  background: #eef0f5;
  height: 562px;
  text-align: center;
}
.team-content .qa-li {
  float: left;
  width: 46%;
  margin-bottom: 70px;
  padding-left: 32px;
}
.team-content .qa-li:nth-of-type(odd) {
  margin-right: 8%;
}
.team-content .qa-li .ql-q {
  line-height: 18px;
  margin-bottom: 16px;
  font-size: 16px;
  color: #0e152c;
  font-weight: 600;
}
.team-content .qa-li .ql-a {
  line-height: 30px;
  font-size: 14px;
  color: #6d7483;
}
.team-content .qa-li .q-icon {
  background: #4d73ec;
}
.team-content .qa-li .a-icon,
.team-content .qa-li .q-icon {
  margin-left: -32px;
  float: left;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  text-align: center;
  line-height: 18px;
  font-size: 12px;
  color: #fff;
}
.team-content .qa-li .a-icon {
  margin-top: 7px;
  background: #69d284;
}
.team-content .view-more {
  width: 119px;
  height: 30px;
  background: #fff;
  border: 1px solid #4d73ec;
  border-radius: 15px;
  line-height: 28px;
  font-size: 14px;
  color: #4d73ec;
}
.team-content .fadeInUp {
  opacity: 0;
  animation: fadeInUp 0.5s linear forwards;
}
@keyframes fadeInUp {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.team-content .animated {
  opacity: 0;
}
.team-content .delay {
  animation-delay: 0.2s;
}
.team-content .delay2 {
  animation-delay: 0.6s;
}
.team-content .delay3 {
  animation-delay: 1s;
}
.pages-team-index-dialog .usage-table {
  position: relative;
  width: 840px;
}
.pages-team-index-dialog .usage-table .btn-close {
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
  transition: 0.3s;
}
.pages-team-index-dialog .usage-table .btn-close:hover {
  transform: rotate(180deg);
}
.pages-team-index-dialog .usage-table .btn-close i {
  font-size: 14px;
  color: #000;
}
.pages-team-index-dialog .usage-table table {
  width: 100%;
}
.pages-team-index-dialog .usage-table table td {
  vertical-align: middle;
}
.pages-team-index-dialog .usage-table table tr:nth-of-type(2n) td {
  background: #f7f8fa;
  border-bottom: 1px solid #d4d7de;
}
.pages-team-index-dialog .usage-table table tr td:first-of-type {
  width: 294px;
  text-align: left;
  padding-left: 40px;
  font-size: 14px;
  color: #121c3b;
  line-height: 66px;
  border-right: 1px solid #d4d7de;
}
.pages-team-index-dialog .usage-table table tr td:last-of-type {
  font-size: 14px;
  color: #0e152c;
  text-align: center;
  line-height: 23px;
  padding: 0 34px;
  font-weight: 600;
}
.pages-team-index-dialog .trial-pop {
  position: relative;
  width: 392px;
  padding: 0 28px 28px;
}
.pages-team-index-dialog .trial-pop .btn-close {
  position: absolute;
  top: 18px;
  right: 18px;
  cursor: pointer;
  transition: 0.3s;
}
.pages-team-index-dialog .trial-pop .btn-close:hover {
  transform: rotate(180deg);
}
.pages-team-index-dialog .trial-pop .btn-close i {
  font-size: 16px;
  color: #000;
}
.pages-team-index-dialog .trial-pop .title {
  padding: 35px 0 31px;
  font-size: 18px;
  font-weight: 700;
  color: #121c3b;
  text-align: center;
}
.pages-team-index-dialog .trial-pop .l-name {
  font-size: 14px;
  color: #a1a8b2;
  margin-bottom: 14px;
  padding-left: 10px;
}
.pages-team-index-dialog .trial-pop .right-con {
  width: 100%;
  height: 40px;
  position: relative;
  margin-bottom: 24px;
  padding-left: 10px;
}
.pages-team-index-dialog .trial-pop input {
  width: 313px;
  height: 100%;
  background: #f5f7f9;
  border-radius: 4px;
  border: none;
  font-size: 14px;
  color: #121c3b;
}
.pages-team-index-dialog .trial-pop .nessary {
  margin-left: 5px;
  font-size: 14px;
  color: #db594f;
  line-height: 30px;
}
.pages-team-index-dialog .trial-pop .error {
  position: absolute;
  top: 45px;
  left: 12px;
  font-size: 12px;
  color: #db594f;
}
.pages-team-index-dialog .trial-pop .send-code {
  width: 88px;
  height: 100%;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #121c3b;
}
.pages-team-index-dialog .trial-pop .btn-submit {
  width: 244px;
  height: 46px;
  background: #4d73ec;
  border-radius: 6px;
  line-height: 46px;
  font-size: 14px;
  color: #fff;
}
.recomment-content .banner {
  height: 593px;
  background: url(https://pic.51ifonts.com/images/team/banner-recom.jpg)
    no-repeat bottom;
  background-size: 100% 100%;
  position: relative;
}
.recomment-content .banner2 {
  height: 544px;
}
@media screen and (max-width: 1920px) {
  .recomment-content .banner {
    background-size: auto 100%;
  }
}
.recomment-content .banner .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 593px;
  background: url(https://pic.51ifonts.com/images/team/recom-bg.png) no-repeat
    top;
  background-size: auto 100%;
  pointer-events: none;
}
.recomment-content .banner .title {
  padding: 87px 0 40px;
  text-align: center;
  font-size: 68px;
  color: #fff;
}
.recomment-content .banner .desc {
  text-align: center;
  font-size: 18px;
  color: #fff;
  line-height: 35px;
}
.recomment-content .banner .desc b {
  color: #f7e36d;
}
.recomment-content .inner {
  width: 1154px;
  margin: 40px auto;
}
.recomment-content .subtitle {
  font-size: 34px;
  color: #171717;
  margin-bottom: 10px;
}
.recomment-content .explain {
  font-size: 18px;
  color: #4d4d4d;
  margin-bottom: 38px;
  line-height: 38px;
}
.recomment-content .explain .red {
  color: #dc4141;
}
.recomment-content .flex {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 48px;
}
.recomment-content .flex .model {
  width: 552px;
  height: 439px;
  background: #fff;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 0 31px 0 rgba(231, 231, 232, 0.5);
}
.recomment-content .flex .model .tit {
  width: 552px;
  height: 92px;
  background: #b7b9be;
  border-radius: 8px 8px 0 0;
  line-height: 92px;
  font-size: 30px;
  color: #fff;
  font-weight: 600;
  margin-bottom: 32px;
}
.recomment-content .flex .model:last-of-type .tit {
  background: #4d73ec;
}
.recomment-content .flex .model .item {
  font-size: 16px;
  color: #959595;
  position: relative;
  line-height: 57px;
}
.recomment-content .flex .model .item .iconfont {
  position: absolute;
  left: 144px;
  top: 22px;
  color: #959595;
  font-size: 16px;
}
.recomment-content .flex .model:last-of-type .item .iconfont {
  color: #4d73ec;
}
.recomment-content .copy-box {
  width: 100%;
  height: 345px;
  background: #fffbed;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 50px 56px 53px;
  position: relative;
  margin-bottom: 82px;
}
.recomment-content .copy-box.cb2 {
  padding: 99px 55px;
}
.recomment-content .copy-box.cb2 > p {
  text-indent: 2em;
}
.recomment-content .copy-box .iconfont {
  position: absolute;
  top: 12px;
  left: 16px;
  font-size: 18px;
  color: #7f7a61;
}
.recomment-content .copy-box > p {
  font-size: 18px;
  font-family: Apple LiSung Light, SimSun;
  color: #666354;
  line-height: 40px;
}
.recomment-content .copy-box .btn-copy {
  width: 240px;
  height: 52px;
  background: #fff2ab;
  border: 1px solid #666354;
  border-radius: 8px;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
  color: #666354;
}
.recomment-content .inner img {
  width: 100%;
  margin-bottom: 48px;
}
.recomment-content .inner img + .subtitle {
  margin-top: 50px;
}
.recomment-content .btn-copy-all {
  width: 240px;
  height: 52px;
  background: #4d73ec;
  border-radius: 8px;
  line-height: 52px;
  text-align: center;
  font-size: 18px;
  color: #fff;
}
.recomment-content .btn-coped-all {
  width: 240px;
  height: 52px;
  border: 1px solid #4d73ec;
  border-radius: 8px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  color: #4d73ec;
}
.recomment-content .warning {
  text-align: center;
  font-size: 14px;
  color: #6d6d6d;
}
.recomment-content .line {
  margin: 34px 0 46px;
  width: 100%;
  height: 1px;
  background: #d3d3d3;
}
.recomment-content .bottom {
  text-align: right;
  font-size: 16px;
  color: #6d6d6d;
  cursor: pointer;
}
.recomment-content .bottom .iconfont {
  margin-left: 5px;
  font-size: 28px;
  color: #999;
  vertical-align: -3px;
  transition: 0.3s;
}
.recomment-content .bottom:hover .iconfont {
  color: #4d73ec;
}
.recomment-content .bottom .warning {
  opacity: 0;
  text-align: right;
  padding-right: 36px;
  transition: 0.3s;
}
.recomment-content .bottom:hover .warning {
  opacity: 1;
}
.recomment-content .return {
  text-align: left;
  font-size: 16px;
  color: #6d6d6d;
  cursor: pointer;
}
.recomment-content .return .iconfont {
  margin-right: 5px;
  font-size: 28px;
  color: #999;
  vertical-align: -3px;
  transition: 0.3s;
}
.recomment-content .return:hover .iconfont {
  color: #4d73ec;
}
.recomment-content .go-member {
  font-size: 18px;
  color: #171717;
  text-align: center;
}
.recomment-content .go-member:hover {
  color: #4d73ec;
}
.user-content {
  padding: 35px 0 80px;
  background: #f5f7f9;
}
.user-content .user-top {
  height: 240px;
  background: #fff no-repeat top;
  background-size: 100% auto;
  border-radius: 12px;
  box-shadow: 0 2px 4px 0 #edf1f3;
  margin-bottom: 42px;
  position: relative;
}
.user-content .user-top .ut-con {
  padding-top: 39px;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  border-radius: 12px;
}
.user-content .user-top .right-box {
  position: absolute;
  top: 39px;
  right: 20px;
  align-content: space-between;
  text-align: right;
}
.user-content .user-top .btn-group {
  display: flex;
  justify-content: space-between;
}
.user-content .user-top .go-exchange {
  display: block;
  width: 72px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid #fff;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #fff;
}
.user-content .user-top .change-info {
  margin-left: 20px;
  font-size: 12px;
  color: #b8ccff;
  text-decoration: underline;
}
.user-content .user-top .logout {
  display: block;
  width: 80px;
  height: 30px;
  background: #326df9;
  border-radius: 6px;
  padding: 0;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
  color: #fff;
}
.user-content .user-top .avatar {
  float: left;
  margin: 0 20px 39px 42px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: #fff;
  text-align: center;
  line-height: 82px;
}
.user-content .user-top .avatar img {
  width: 100%;
}
.user-content .user-top .uname {
  padding-top: 4px;
  line-height: 40px;
  font-size: 28px;
  color: #fff;
  margin-bottom: 18px;
}
.user-content .user-top .uname .btn {
  display: inline-block;
  height: 26px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #fff;
  font-size: 14px;
  font-weight: 400;
  color: #24b45f;
  display: inline-flex;
  align-items: center;
  margin-left: 14px;
  padding-right: 9px;
  cursor: pointer;
}
.user-content .user-top .uname img {
  margin-left: 12px;
  height: 18px;
}
.user-content .user-top .info {
  line-height: 20px;
  font-size: 12px;
  color: #fff;
}
.user-content .user-top .info .uid {
  font-size: 14px;
  margin-right: 10px;
}
.user-content .user-top .info .btn {
  margin-right: 15px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #fff;
  color: #fff;
  text-align: center;
}
.user-content .user-top .info .btn i {
  font-size: 18px;
}
.user-content .user-top .nav-list {
  display: flex;
  justify-content: flex-start;
  line-height: 90px;
  padding-left: 48px;
}
.user-content .nav-list .nav-li {
  margin-right: 72px;
  height: 75px;
  font-size: 16px;
  color: #a2a8b1;
  border-bottom: 3px solid #fff;
  cursor: pointer;
}
.user-content .nav-list .nav-li.on,
.user-content .nav-list .nav-li:hover {
  color: #202937;
}
.user-content .nav-list .nav-li.on {
  border-color: #0058ff;
}
.user-content .nav-list .nav-li .iconfont {
  margin-right: 8px;
  font-size: 18px;
}
.user-content .nav-list .nav-li .icon-ziti1 {
  font-weight: 600;
}
.user-content .member-manage .mm-con {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 42px;
}
.user-content .member-manage .mm-con.flex {
  display: flex;
}
.user-content .member-manage .left-box {
  width: 890px;
  border-right: 1px solid #f5f7f9;
  padding: 42px 42px 56px;
}
.user-content .left-box .warning {
  font-size: 14px;
  color: #a2a8b1;
}
.user-content .left-box .warning .iconfont {
  color: #de3b0d;
  font-size: 14px;
  margin-right: 8px;
}
.user-content .member-manage .priv-list {
  margin-top: 47px;
  display: flex;
}
.user-content .member-manage .priv-li {
  width: 120px;
  text-align: center;
  margin-right: 52px;
}
.user-content .member-manage .priv-li:nth-of-type(5) {
  margin-right: 0;
}
.user-content .member-manage .priv-li .icon-box {
  display: block;
  margin: 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  text-align: center;
  line-height: 76px;
}
.user-content .member-manage .priv-li .icon1 {
  background: linear-gradient(227deg, #f6c99e, #f4c295);
}
.user-content .member-manage .priv-li .icon2 {
  background: linear-gradient(242deg, #2175fb, #195bfb);
}
.user-content .member-manage .priv-li .icon3 {
  background: linear-gradient(147deg, #f69e69, #f28061);
}
.user-content .member-manage .priv-li .icon4 {
  background: linear-gradient(270deg, #7fd5a4, #23b29c);
}
.user-content .member-manage .priv-li .icon5 {
  background: linear-gradient(349deg, #f8de7b, #fcf4c5);
}
.user-content .member-manage .icon-box .iconfont {
  vertical-align: middle;
  font-size: 42px;
  color: #fff;
}
.user-content .member-manage .priv-li .name {
  margin-top: 26px;
  font-size: 14px;
  color: #11182e;
  font-weight: 600;
}
.user-content .member-manage .right-box {
  width: calc(100% - 890px);
  text-align: center;
  padding-top: 72px;
}
.user-content .member-manage .vip-type {
  font-size: 20px;
  color: #11182e;
  font-weight: 600;
}
.user-content .member-manage .vip-type img {
  height: 28px;
  margin-right: 8px;
}
.user-content .member-manage .detail {
  margin-top: 10px;
  font-size: 14px;
  color: #a1a8b2;
}
.user-content .member-manage .price {
  margin-top: 16px;
  font-size: 14px;
  color: #535d71;
}
.user-content .member-manage .price span {
  font-size: 16px;
  color: #d92e63;
}
.user-content .member-manage .price b {
  font-size: 32px;
  color: #d92e63;
  vertical-align: text-bottom;
}
.user-content .member-manage .btn-open {
  width: 170px;
  height: 40px;
  background: linear-gradient(270deg, #4b88ff, #3761f7);
  border-radius: 6px;
  font-size: 14px;
  color: #fff;
  line-height: 40px;
}
.user-content .vip-info {
  height: 80px;
  border-bottom: 1px solid #f5f7f9;
  padding: 0 36px;
  display: flex;
  justify-content: space-between;
  line-height: 80px;
  position: relative;
}
.user-content .vip-info .fl-info {
  font-size: 16px;
  color: #af772d;
  font-weight: 600;
}
.user-content .vip-info .fl-info img {
  height: 20px;
  margin-right: 10px;
  vertical-align: -3px;
}
.user-content .vip-info .fl-info .overdue {
  margin-left: 14px;
  font-size: 12px;
  color: #de3b0d;
}
.user-content .vip-info .expire {
  font-size: 14px;
  color: #11182e;
  font-weight: 600;
}
.user-content .vip-info .btn-renewal {
  padding: 0 40px;
  height: 36px;
  background: #f1f3f4;
  border-radius: 4px;
  line-height: 36px;
  font-size: 12px;
  color: #202937;
}
.user-content .vip-info .btn-renewal:hover {
  background: linear-gradient(270deg, #3a7fff, #275af0);
  color: #fff;
}
.user-content .vip-info .icon {
  position: absolute;
  top: 90px;
  right: 36px;
}
.user-content .member-manage .download {
  padding-bottom: 36px;
  border: 1px solid #f5f7f9;
  position: relative;
}
.user-content .icon > i {
  font-size: 66px;
}
.user-content .icon .icon-yiguoqi {
  color: #ee663f;
}
.user-content .icon .icon-shengxiaozhong1 {
  color: #44d7b6;
}
.user-content .member-manage .subtitle {
  padding: 34px 36px;
  font-size: 16px;
  color: #11182e;
}
.user-content .flex-around {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.user-content .download .certificate-box {
  position: relative;
  width: 386px;
  height: 257px;
  overflow: hidden;
}
.user-content .download .certificate-box img {
  height: 100%;
}
.user-content .certificate-box .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(17, 24, 46, 0.4);
  padding-top: 100px;
  text-align: center;
  transition: 0.3s;
}
.user-content .certificate-box.view-img .mask {
  cursor: zoom-in;
  opacity: 0;
}
.user-content .certificate-box.view-img:hover .mask {
  opacity: 1;
}
.user-content .mask .iconfont {
  font-size: 28px;
  color: #fff;
}
.user-content .mask .mask-info {
  margin-top: 4px;
  font-size: 14px;
  color: #fff;
  font-weight: 600;
}
.user-content .mask .mask-info.mt {
  margin-top: 20px;
}
.user-content .download .btn-down {
  width: 150px;
  height: 36px;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  border-radius: 4px;
  line-height: 36px;
  font-size: 12px;
  color: #fff;
}
.user-content .btn-down .iconfont {
  margin-right: 4px;
  vertical-align: -2px;
  display: inline-block;
  animation: rotate 0.8s linear infinite;
}
.user-content .download .down-warning {
  margin-top: 4px;
  font-size: 12px;
  color: #535d71;
}
.user-content .member-manage .team-desc {
  padding-bottom: 56px;
}
.user-content .member-manage .team-con {
  margin: 0 auto;
  width: calc(100% - 72px);
  background-color: #f5f7f9;
  border-radius: 6px;
  position: relative;
  padding: 32px 52px 2px;
}
.user-content .team-con .info {
  font-size: 14px;
  color: #11182e;
  margin-bottom: 25px;
}
.user-content .team-con .info .l-name {
  display: inline-block;
  width: 86px;
  font-weight: 600;
}
.user-content .team-con .info .manager-avatar {
  margin-right: 15px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.user-content .team-con .info .vip-type {
  margin-left: 8px;
  height: 14px;
}
.user-content .team-con .info span {
  margin-right: 58px;
}
.user-content .team-con .exit-team {
  padding: 0 32px;
  height: 36px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e3e6e9;
  font-size: 12px;
  color: #0058ff;
  line-height: 36px;
}
.user-content .team-info {
  margin: 0 auto 36px;
  width: calc(100% - 72px);
  height: 70px;
  background: #f5f7f9;
  border-radius: 6px;
  padding: 0 27px;
  line-height: 70px;
  font-size: 14px;
  color: #202937;
}
.user-content .team-info .text {
  margin-right: 60px;
}
.user-content .team-info .iconfont {
  margin-right: 10px;
  font-size: 20px;
}
.user-content .team-info .btn {
  padding: 0 16px;
  height: 36px;
  background: #fff;
  border-radius: 4px;
  line-height: 36px;
  font-size: 12px;
  color: #0e5efc;
  position: relative;
}
.user-content .team-info .btn:hover,
.user-content .team-li .btn-delete:hover {
  background: linear-gradient(270deg, #3a7fff, #275af0);
  color: #fff;
}
.user-content .team-info .btn .dot {
  position: absolute;
  top: 10px;
  right: 7px;
  width: 6px;
  height: 6px;
  background: #de3b0d;
  border-radius: 50%;
}
.user-content .team-list {
  margin: 0 auto;
  width: calc(100% - 72px);
}
.user-content .team-list .team-li {
  float: left;
  margin: 0 29px 24px 0;
  width: 260px;
  height: 82px;
  border-radius: 6px;
  border: 1px solid #f5f7f9;
  position: relative;
  padding: 22px 84px 0 80px;
}
.user-content .team-list .team-li:nth-of-type(4n) {
  margin-right: 0;
}
.user-content .team-list.overdue .btn-delete {
  display: none;
}
.user-content .team-li .avatar {
  position: absolute;
  top: 19px;
  left: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.user-content .team-li .tl-info {
  width: 100%;
  margin-bottom: 8px;
  font-size: 14px;
  color: #202937;
  white-space: nowrap;
}
.user-content .team-li .tl-info .uname {
  display: inline-block;
  max-width: calc(100% - 22px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-content .team-li .tl-info img {
  vertical-align: 0;
  height: 14px;
  margin-left: 4px;
}
.user-content .team-li .btn-delete {
  width: 64px;
  height: 25px;
  background: #f1f3f4;
  border-radius: 4px;
  line-height: 25px;
  font-size: 12px;
  color: #202937;
}
.user-custom .custom-manage {
  margin-bottom: 42px;
  background-color: #fff;
  border-radius: 12px;
}
.user-custom .placeholder {
  height: 480px;
  text-align: center;
  padding-top: 225px;
}
.user-custom .placeholder .show-span {
  width: 296px;
  height: 47px;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  border-radius: 4px;
  color: #fff;
  line-height: 47px;
}
.user-custom .placeholder p {
  color: #202937;
  margin-bottom: 40px;
}
.user-custom .not-vip {
  background: #fff
    url(https://pic.51ifonts.com/images/user/custom-manage-not-vip.png)
    no-repeat center 30%;
  background-size: 50% !important;
}
.user-custom .no-custom {
  background: #fff
    url(https://pic.51ifonts.com/images/user/custom-manage-no-custom.png)
    no-repeat center 30%;
  background-size: 36% !important;
}
.user-custom .manager {
  padding: 30px 50px;
}
.user-custom .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}
.user-custom .title .text {
  color: #202937;
  font-weight: 700;
}
.user-custom .title .add {
  width: 109px;
  height: 36px;
  line-height: 36px;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  color: #fff;
  border-radius: 4px;
}
.user-custom .pagination {
  text-align: center;
  margin-top: 20px;
}
.user-custom .list > div {
  padding: 20px 10px 20px 35px;
  margin: 30px 0;
  border: 1px solid #f1f3f4;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-custom .list .info .img {
  width: 165px;
  height: 115px;
  line-height: 115px;
  font-size: 12px;
  color: #11182e;
  text-align: center;
  margin-right: 66px;
  background: #fff
    url(https://pic.51ifonts.com/images/user/new-agreement-c2.jpg) no-repeat 50%;
  background-size: auto 100%;
}
.user-custom .list .info .img p {
  background: rgba(0, 0, 0, 0.25);
}
.user-custom .list .info .text p {
  color: #202937;
  line-height: 2;
}
.user-custom .list .info .text p span {
  font-weight: 700;
}
.user-custom .list .info > div {
  display: inline-block;
  vertical-align: middle;
}
.user-custom .list .download {
  min-width: 109px;
  padding: 0 10px;
  height: 36px;
  line-height: 36px;
  border-radius: 4px;
  background: #f1f3f4;
  color: #202937;
}
.user-custom .list .download:hover {
  background: linear-gradient(270deg, #3a7fff, #275af0);
  color: #fff;
}
.user-custom .list .download .iconfont {
  margin-right: 4px;
  vertical-align: -2px;
  display: inline-block;
  animation: rotate 0.8s linear infinite;
}
.user-custom span.expired {
  color: #de3b0d;
  font-size: 12px;
  margin-left: 24px;
}
.user-custom i.expired {
  color: #ee663f;
  font-size: 66px;
  margin-right: 38px;
  vertical-align: middle;
}
.user-custom .loading {
  padding: 200px;
  text-align: center;
}
.add-custom {
  width: 465px;
  text-align: center;
  padding: 30px 10px 20px;
  overflow-y: auto;
}
.add-custom::-webkit-scrollbar {
  width: 5px;
}
.add-custom::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #dbdfe4;
}
.add-custom::-webkit-scrollbar-track {
  width: 5px;
  border-radius: 10px;
  background-color: transparent;
}
.add-custom h3 {
  font-size: 16px;
}
.add-custom .form-div,
.add-custom > div {
  padding: 15px 0;
}
.add-custom a.btn-close {
  position: absolute;
  top: 12px;
  right: 18px;
  transition: 0.3s;
}
.add-custom a.btn-close:hover {
  transform: rotate(180deg);
}
.add-custom p {
  margin-top: 30px;
  margin-bottom: 5px;
  text-align: left;
  padding-left: 30px;
  color: #202937;
  font-weight: 700;
}
.add-custom hr {
  width: 90%;
  border: none;
  border-bottom: 1px dashed #a2a8b1;
}
.add-custom .left {
  display: inline-block;
  width: 30%;
  text-align: right;
}
.add-custom .right {
  display: inline-block;
  width: 70%;
  text-align: left;
  font-weight: 700;
}
.add-custom .right input {
  height: 38px;
  margin-right: 10px;
  width: 90%;
  background: #f5f7f9;
  border-radius: 4px;
  border: 1px solid #f5f7f9;
}
.add-custom .right .mark {
  color: #de3b0d;
  font-size: 12px;
}
.add-custom .right .error {
  display: block;
  position: absolute;
  color: #ee663f;
  font-size: 12px !important;
  padding-left: 4px;
}
.add-custom .right .error i {
  font-size: 12px !important;
}
.add-custom .btn {
  margin-top: 35px;
  margin-bottom: 20px;
}
.add-custom .confirm p {
  text-align: center;
  color: #b5bcc4;
  font-size: 12px;
  margin-bottom: 10px;
}
.add-custom .confirm a {
  margin-top: 10px;
  display: inline-block;
  color: #535d71;
  font-size: 12px;
}
.add-custom .con-error {
  margin: 0;
  text-align: left;
  padding-left: 134px;
  color: #ee663f;
  font-size: 12px;
}
.add-custom .con-error i {
  font-size: 12px;
}
.user-edit.layout {
  padding: 40px 50px;
  background: #fff;
  border-radius: 12px;
}
.user-edit h5 {
  color: #202937;
  font-weight: 700;
}
.user-edit .context {
  padding: 20px 0;
  margin-bottom: 20px;
}
.user-edit .context p .left {
  display: inline-block;
  text-align: right;
  width: 90px;
}
.user-edit .context span.status {
  background: #44d7b6;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  width: 56px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  display: inline-block;
}
.user-edit .context span.status.not {
  background: #ee663f;
}
.user-edit .context .time {
  margin-left: 70px;
}
.user-edit .context > div {
  display: flex;
  justify-content: space-between;
  margin: 22px 0;
  height: 25px;
  line-height: 25px !important;
}
.user-edit .context .btn {
  font-size: 12px;
  color: #11182e;
  background: #f1f3f4;
  width: 78px;
  height: 25px;
  line-height: 25px;
  border-radius: 4px;
}
.user-edit .context .btn:hover {
  color: #fff;
  background: linear-gradient(270deg, #3a7fff, #275af0);
}
.user-edit .base-info > p {
  margin: 22px 0;
}
.user-edit .base-info .img {
  width: 57px;
  height: 57px;
  border-radius: 50%;
  margin-bottom: 20px;
  margin-left: 30px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.user-edit .base-info .img p {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 57px;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-weight: 700;
  font-size: 10px;
  color: #eee;
}
.user-edit .base-info .img:hover p {
  display: block;
}
.user-edit .base-info .img img {
  width: 100%;
}
.user-edit .equipment-info {
  margin: 32px 0;
  line-height: 25px;
  height: 25px;
  display: flex;
  justify-content: space-between;
}
.user-edit .equipment-info .ei-li {
  width: 250px;
  font-size: 14px;
  color: #a2a8b1;
}
.user-edit .equipment-info .ei-li i {
  margin-right: 5px;
  margin-top: -8px;
  float: left;
  font-size: 42px;
  color: #a2a8b1;
}
.user-edit .equipment-info .ei-li .current {
  color: #11182e;
}
.user-edit .equipment-info .btn-del {
  font-size: 12px;
  color: #11182e;
  background: #f1f3f4;
  width: 120px;
  height: 25px;
  line-height: 25px;
  border-radius: 4px;
}
.user-edit .equipment-info .btn-del:hover {
  color: #fff;
  background: linear-gradient(270deg, #3a7fff, #275af0);
}
.user-edit .empty {
  text-align: center;
  margin-top: 30px;
  color: #a2a8b1;
}
.user-edit .context span.right,
.user-edit .context span.status {
  margin-left: 25px;
}
.user-edit-avatar .edit-avatar.main {
  padding: 25px 0;
  text-align: center;
  width: 530px;
}
.user-edit-avatar .edit-avatar .btns {
  padding: 0 30px;
}
.user-edit-avatar .edit-avatar a.btn-close {
  position: absolute;
  top: 10px;
  right: 10px;
  transition: 0.3s;
}
.user-edit-avatar .edit-avatar a.btn-close:hover {
  transform: rotate(180deg);
}
.user-edit-avatar .edit-avatar h2 {
  text-align: center;
  color: #202937;
  font-size: 16px;
}
.user-edit-avatar .edit-avatar hr {
  width: 100%;
  margin: 22px 0;
  border: none;
  border-bottom: 1px solid #e7e9ef;
}
.user-edit-avatar .edit-avatar input#avatar-select {
  display: none;
}
.user-edit-avatar .edit-avatar .btn.select {
  width: 72px;
  height: 24px;
  line-height: 24px;
  background: rgba(0, 88, 255, 0.06);
  border-radius: 14px;
  color: #0058ff;
  font-size: 12px;
  font-weight: 700;
}
.user-edit-avatar .edit-avatar .btn.select:hover {
  background: linear-gradient(270deg, #3a7fff, #275af0);
  color: #fff;
}
.user-edit-avatar .edit-avatar .btn.rotate {
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  color: #0054ff;
}
.user-edit-avatar .edit-avatar .btn.rotate i {
  line-height: 22px;
}
.user-edit-avatar .edit-avatar .btn-slider {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-edit-avatar .edit-avatar .cancel-save {
  padding: 0 70px;
  display: flex;
  justify-content: space-around;
}
.user-edit-avatar .edit-avatar .cancel {
  width: 105px;
  height: 33px;
  line-height: 33px;
  background: #e3e9f4;
  border-radius: 17px;
  color: #202937;
  font-weight: 700;
}
.user-edit-avatar .edit-avatar .save {
  width: 105px;
  height: 33px;
  line-height: 33px;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  border-radius: 17px;
  color: #fff;
  font-weight: 700;
}
.bind-phone-or-email.main {
  padding: 25px 44px;
  width: 343px;
  text-align: center;
}
.bind-phone-or-email a.btn-close {
  position: absolute;
  top: 10px;
  right: 10px;
  transition: 0.3s;
}
.bind-phone-or-email a.btn-close:hover {
  transform: rotate(180deg);
}
.bind-phone-or-email h2 {
  color: #171e34;
  font-size: 16px;
}
.bind-phone-or-email form {
  margin-top: 28px;
}
.bind-phone-or-email input {
  width: 100%;
  height: 42px;
  background: #f0f2f5;
  border-radius: 4px;
  border: none;
}
.bind-phone-or-email form > div:first-child {
  margin-bottom: 18px;
}
.bind-phone-or-email form > div:last-of-type {
  margin-bottom: 40px;
}
.bind-phone-or-email form > div {
  position: relative;
}
.bind-phone-or-email form > div > a {
  position: absolute;
  top: 14px;
  right: 8px;
}
.bind-phone-or-email .error {
  position: absolute;
  color: #ee663f;
  font-size: 12px;
  top: 45px;
}
.bind-phone-or-email .finish {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  color: #fff;
}
.bind-phone-or-email i.icon-jinggao {
  display: block;
  margin: 12px auto 17px;
  font-size: 40px;
  color: #f7b500;
}
.bind-phone-or-email .has-bind p {
  color: #535d71;
  line-height: 2;
}
.bind-phone-or-email .has-bind p:last-of-type {
  margin-bottom: 25px;
}
.bind-wechat a.btn-close {
  position: absolute;
  top: 10px;
  right: 10px;
  transition: 0.3s;
}
.bind-wechat a.btn-close:hover {
  transform: rotate(180deg);
}
.bind-wechat.main {
  text-align: center;
  width: 340px;
  padding: 25px 42px;
}
.bind-wechat h2 {
  color: #171e34;
  font-size: 18px;
  margin-bottom: 16px;
}
.bind-wechat img {
  width: 118px;
}
.bind-wechat .finish {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  color: #fff;
}
.bind-wechat i.icon-jinggao {
  display: block;
  margin: 12px auto 17px;
  font-size: 40px;
  color: #f7b500;
}
.bind-wechat .has-bind p {
  color: #535d71;
  line-height: 2;
}
.bind-wechat .has-bind p:last-of-type {
  margin-bottom: 25px;
}
.del-pop {
  position: relative;
  width: 382px;
  padding: 36px 0 24px;
  text-align: center;
}
.del-pop .btn-close {
  position: absolute;
  top: 18px;
  right: 18px;
  cursor: pointer;
  transition: 0.3s;
}
.del-pop .btn-close:hover {
  transform: rotate(180deg);
}
.del-pop .btn-close i {
  font-size: 14px;
  color: #000;
}
.del-pop .title {
  font-size: 16px;
  color: #202937;
  letter-spacing: 1px;
  font-weight: 600;
}
.del-pop .desc {
  font-size: 14px;
  color: #11182e;
  margin: 22px 0 33px;
}
.del-pop .btn-group {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
.del-pop .btn-reset {
  background: #dbdfe4;
  color: #11182e;
}
.del-pop .btn-reset,
.del-pop .btn-submit {
  width: 100px;
  height: 32px;
  border-radius: 4px;
  line-height: 32px;
  font-size: 12px;
}
.del-pop .btn-submit {
  background: linear-gradient(270deg, #3a7fff, #275af0);
  color: #fff;
}
.member-manage .download .certificate-box img {
  height: 100%;
}
.member-manage .btn-down .iconfont {
  margin-right: 4px;
  vertical-align: -2px;
  display: inline-block;
  animation: rotate 0.8s linear infinite;
}
.fill-info-pop {
  width: 488px;
  padding: 36px 20px 40px;
  position: relative;
}
.fill-info-pop .btn-close {
  position: absolute;
  top: 18px;
  right: 18px;
  cursor: pointer;
  transition: 0.3s;
}
.fill-info-pop .btn-close:hover {
  transform: rotate(180deg);
}
.fill-info-pop .btn-close i {
  font-size: 14px;
  color: #000;
}
.fill-info-pop .title {
  font-size: 16px;
  color: #202937;
  font-weight: 600;
  text-align: center;
  margin-bottom: 32px;
}
.fill-info-pop .auth-a {
  margin-top: 20px;
  font-size: 14px;
  color: #202937;
  padding: 0 20px;
  white-space: nowrap;
}
.fill-info-pop .auth-a .l-name {
  float: left;
  color: #a1a8b2;
  width: 65px;
  text-align: right;
}
.fill-info-pop .line {
  margin: 25px 0;
  background: #f5f7f9;
  width: 100%;
  height: 1px;
}
.fill-info-pop .subtitle {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #202937;
}
.fill-info-pop .auth-info {
  margin: 24px auto 0;
  width: 400px;
  position: relative;
}
.fill-info-pop .info-con .auth-b {
  width: 75px;
}
.fill-info-pop .info-con .error {
  left: 75px;
}
.fill-info-pop .auth-b {
  float: left;
  width: 100px;
  text-align: right;
  font-size: 14px;
  color: #a1a8b2;
  line-height: 38px;
}
.fill-info-pop .auth-info input {
  width: 299px;
  height: 38px;
  background: #f5f7f9;
  border-radius: 4px;
  border: none;
}
.fill-info-pop .error {
  position: absolute;
  top: 42px;
  left: 100px;
  font-size: 12px;
  color: #ee663f;
}
.fill-info-pop .error .iconfont {
  font-size: 12px;
  margin-right: 5px;
}
.fill-info-pop .btn {
  width: 306px;
  height: 47px;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  border-radius: 4px;
  text-align: center;
  line-height: 47px;
  font-size: 14px;
  color: #fff;
}
.fill-info-pop .btn.disable {
  cursor: no-drop;
}
.fill-info-pop .submit-error {
  position: absolute;
  top: 52px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #ee663f;
}
.require-info-pop {
  width: 488px;
  padding: 36px 46px 30px;
  position: relative;
}
.require-info-pop .btn-close {
  position: absolute;
  top: 18px;
  right: 18px;
  cursor: pointer;
  transition: 0.3s;
}
.require-info-pop .btn-close:hover {
  transform: rotate(180deg);
}
.require-info-pop .btn-close i {
  font-size: 14px;
  color: #000;
}
.require-info-pop .title {
  font-size: 16px;
  color: #202937;
  font-weight: 600;
  text-align: center;
  margin-bottom: 32px;
}
.require-info-pop .subtitle {
  text-align: left;
  font-size: 14px;
  color: #202937;
}
.require-info-pop .con {
  margin: 16px 0 30px;
  width: 100%;
  background: rgba(236, 241, 245, 0.25);
  border-radius: 4px;
  border: 1px dotted #ecf1f5;
  padding: 20px 28px 16px;
}
.require-info-pop .info {
  font-size: 14px;
  color: #202937;
  margin-bottom: 16px;
}
.require-info-pop .info:last-of-type {
  margin-bottom: 0;
}
.require-info-pop .l-name {
  color: #a1a8b2;
}
.require-info-pop .warning {
  margin: 38px 0 12px;
  font-size: 12px;
  color: #a1a8b2;
  text-align: center;
}
.require-info-pop .btn {
  width: 306px;
  height: 47px;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  border-radius: 4px;
  text-align: center;
  line-height: 47px;
  font-size: 14px;
  color: #fff;
}
.require-info-pop .btn.disable {
  background: #abb5c1;
}
.require-info-pop .return {
  margin: 10px auto 0;
  display: block;
  width: 70px;
  text-align: center;
  font-size: 12px;
  color: #b1bbc7;
  cursor: pointer;
}
.apply-records-pop .common-pop {
  position: relative;
}
.apply-records-pop .common-pop .btn-close {
  position: absolute;
  top: 18px;
  right: 18px;
  cursor: pointer;
  transition: 0.3s;
}
.apply-records-pop .common-pop .btn-close:hover {
  transform: rotate(180deg);
}
.apply-records-pop .common-pop .btn-close i {
  font-size: 14px;
  color: #000;
}
.apply-records-pop .exit-team-pop {
  width: 316px;
  text-align: center;
  padding: 36px 0 24px;
}
.apply-records-pop .exit-team-pop .title {
  font-size: 16px;
  color: #202937;
  letter-spacing: 1px;
  font-weight: 600;
}
.apply-records-pop .exit-team-pop .desc {
  font-size: 14px;
  color: #11182e;
  margin: 22px 0 33px;
}
.apply-records-pop .exit-team-pop .desc span:first-of-type {
  margin-right: 45px;
}
.apply-records-pop .exit-team-pop .btn-group {
  display: flex;
  justify-content: space-around;
}
.apply-records-pop .exit-team-pop .btn-reset {
  width: 100px;
  height: 32px;
  background: #dbdfe4;
  border-radius: 4px;
  line-height: 32px;
  font-size: 12px;
  color: #11182e;
}
.apply-records-pop .exit-team-pop .btn-submit {
  width: 100px;
  height: 32px;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  border-radius: 4px;
  line-height: 32px;
  font-size: 12px;
  color: #fff;
}
.apply-records-pop .apply-records-pop {
  width: 886px;
  padding: 0 30px 25px;
}
.apply-records-pop .apply-records-pop .title {
  padding: 35px 0 30px;
  font-size: 16px;
  color: #202937;
}
.apply-records-pop .apply-records-pop .thead {
  border-bottom: 1px solid #f5f7f9;
  padding-bottom: 12px;
  display: flex;
  font-size: 14px;
  color: #a1a8b2;
  text-align: center;
}
.apply-records-pop .apply-records-pop .list-box {
  margin-top: 15px;
  max-height: 370px;
  overflow-y: auto;
}
.apply-records-pop .apply-records-pop .tr {
  display: flex;
  padding: 16px 0;
  line-height: 42px;
  text-align: center;
}
.apply-records-pop .apply-records-pop .td:first-of-type {
  text-align: left;
  padding-left: 14px;
}
.apply-records-pop .apply-records-pop .td.w20 {
  width: 20%;
}
.apply-records-pop .apply-records-pop .td.w30 {
  width: 30%;
}
.apply-records-pop .apply-records-pop .td .avatar {
  float: left;
  margin-right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.apply-records-pop .apply-records-pop .td .uinfo {
  font-size: 14px;
  color: #202937;
  line-height: 20px;
}
.apply-records-pop .apply-records-pop .tr .td:last-of-type {
  display: flex;
  justify-content: space-around;
  padding: 8px 10px 0 20px;
}
.apply-records-pop .apply-records-pop .td .btn-agree {
  width: 77px;
  height: 25px;
  background: #00d5b0;
  border-radius: 4px;
  line-height: 25px;
  font-size: 12px;
  color: #fff;
}
.apply-records-pop .apply-records-pop .td .btn-refuse {
  width: 77px;
  height: 25px;
  background: #ee663f;
  border-radius: 4px;
  line-height: 25px;
  font-size: 12px;
  color: #fff;
}
.auth-certificate {
  margin-left: -10px;
  width: 1190px;
  height: 794px;
  background: url(https://51ifonts.com/images/certificate/bg.jpg?v=2) no-repeat
    top;
  background-size: 100% auto;
  text-align: center;
}
.auth-certificate .title {
  padding-top: 40px;
  font-size: 54px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 6px;
  text-shadow: 0 0 13px rgba(12, 72, 117, 0.4);
}
.auth-certificate .title > span {
  letter-spacing: 0;
  margin-right: 6px;
}
.auth-certificate .serial-number {
  padding-top: 12px;
  font-size: 18px;
  color: #fadbb2;
  letter-spacing: 2px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(44, 70, 128, 0.5);
}
.auth-certificate .auth-type {
  margin-top: 90px;
  font-size: 20px;
  color: #5386ad;
}
.auth-certificate .auth-type i {
  margin: 0 10px;
  display: inline-block;
  vertical-align: middle;
  width: 132px;
  height: 1px;
  background-color: #d1dfe9;
}
.auth-certificate .auth-obj {
  margin: 40px auto 0;
  width: 926px;
}
.auth-certificate .auth-obj p {
  float: left;
  width: 50%;
  text-align: left;
  font-size: 22px;
  color: #485056;
  white-space: nowrap;
  margin-bottom: 20px;
  overflow: hidden;
  height: 26px;
}
.auth-certificate .auth-obj p:nth-of-type(2n) {
  margin-left: 2%;
  width: 48%;
}
.auth-certificate .subtitle {
  margin: 42px 0 135px;
  font-weight: 600;
  font-size: 34px;
  color: #5386ad;
  position: relative;
}
.auth-certificate .subtitle:before {
  position: absolute;
  content: '';
  bottom: -15px;
  left: 50%;
  margin-left: -365px;
  width: 730px;
  height: 1px;
  background-color: #d1dfe9;
}
.auth-certificate .area-expire {
  padding-left: 132px;
  font-size: 20px;
  color: #555d62;
  text-align: left;
  margin-top: 23px;
}
.auth-certificate .area-expire > span {
  color: #5386ad;
}
.auth-certificate .auth-chapter {
  margin-top: -12px;
  font-size: 18px;
  color: #485056;
  text-align: right;
  padding-right: 124px;
  position: relative;
}
.auth-certificate .auth-chapter:before {
  position: absolute;
  content: '';
  bottom: -18px;
  right: 131px;
  width: 194px;
  height: 194px;
  background: url(https://51ifonts.com/images/common/seal.png) no-repeat;
  background-size: 100% auto;
}
.member-manage .mm-con {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 42px;
}
.member-manage .mm-con.flex {
  display: flex;
}
.member-manage .left-box {
  width: 890px;
  border-right: 1px solid #f5f7f9;
  padding: 42px 42px 56px;
}
.member-manage .left-box .warning {
  font-size: 14px;
  color: #a2a8b1;
}
.member-manage .left-box .warning .iconfont {
  color: #de3b0d;
  font-size: 14px;
  margin-right: 8px;
}
.member-manage .priv-list {
  margin-top: 47px;
  display: flex;
}
.member-manage .priv-li {
  width: 120px;
  text-align: center;
  margin-right: 52px;
}
.member-manage .priv-li:nth-of-type(5) {
  margin-right: 0;
}
.member-manage .priv-li .icon-box {
  display: block;
  margin: 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  text-align: center;
  line-height: 76px;
}
.member-manage .priv-li .icon1 {
  background: linear-gradient(227deg, #f6c99e, #f4c295);
}
.member-manage .priv-li .icon2 {
  background: linear-gradient(242deg, #2175fb, #195bfb);
}
.member-manage .priv-li .icon3 {
  background: linear-gradient(147deg, #f69e69, #f28061);
}
.member-manage .priv-li .icon4 {
  background: linear-gradient(270deg, #7fd5a4, #23b29c);
}
.member-manage .priv-li .icon5 {
  background: linear-gradient(349deg, #f8de7b, #fcf4c5);
}
.member-manage .icon-box .iconfont {
  vertical-align: middle;
  font-size: 42px;
  color: #fff;
}
.member-manage .priv-li .name {
  margin-top: 26px;
  font-size: 14px;
  color: #11182e;
  font-weight: 600;
}
.member-manage .right-box {
  width: calc(100% - 890px);
  text-align: center;
  padding-top: 72px;
}
.member-manage .vip-type {
  font-size: 20px;
  color: #11182e;
  font-weight: 600;
}
.member-manage .vip-type img {
  height: 28px;
  margin-right: 8px;
}
.member-manage .detail {
  margin-top: 10px;
  font-size: 14px;
  color: #a1a8b2;
}
.member-manage .price {
  margin-top: 16px;
  font-size: 14px;
  color: #535d71;
}
.member-manage .price span {
  font-size: 16px;
  color: #d92e63;
}
.member-manage .price b {
  font-size: 32px;
  color: #d92e63;
  vertical-align: text-bottom;
}
.member-manage .btn-open {
  width: 170px;
  height: 40px;
  background: linear-gradient(270deg, #4b88ff, #3761f7);
  border-radius: 6px;
  font-size: 14px;
  color: #fff;
  line-height: 40px;
}
.member-manage .vip-info {
  height: 80px;
  border-bottom: 1px solid #f5f7f9;
  padding: 0 36px;
  display: flex;
  justify-content: space-between;
  line-height: 80px;
  position: relative;
}
.member-manage .vip-info .fl-info {
  font-size: 16px;
  color: #af772d;
  font-weight: 600;
}
.member-manage .vip-info .fl-info img {
  height: 20px;
  margin-right: 10px;
  vertical-align: -3px;
}
.member-manage .vip-info .fl-info .overdue {
  margin-left: 14px;
  font-size: 12px;
  color: #de3b0d;
}
.member-manage .vip-info .expire {
  font-size: 14px;
  color: #11182e;
  font-weight: 600;
}
.member-manage .vip-info .btn-renewal {
  padding: 0 40px;
  height: 36px;
  background: #f1f3f4;
  border-radius: 4px;
  line-height: 36px;
  font-size: 12px;
  color: #202937;
}
.member-manage .vip-info .btn-renewal:hover {
  background: linear-gradient(270deg, #3a7fff, #275af0);
  color: #fff;
}
.member-manage .vip-info .icon {
  position: absolute;
  top: 90px;
  right: 36px;
}
.member-manage .download {
  padding-bottom: 36px;
  border: 1px solid #f5f7f9;
  position: relative;
}
.member-manage .icon > i {
  font-size: 66px;
}
.member-manage .icon .icon-yiguoqi {
  color: #ee663f;
}
.member-manage .icon .icon-shengxiaozhong1 {
  color: #44d7b6;
}
.member-manage .subtitle {
  padding: 34px 36px;
  font-size: 16px;
  color: #11182e;
}
.member-manage .flex-around {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.member-manage .download .certificate-box {
  position: relative;
  width: 386px;
  height: 257px;
  overflow: hidden;
}
.member-manage .download .certificate-box img {
  width: 100%;
}
.member-manage .certificate-box .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(17, 24, 46, 0.4);
  padding-top: 100px;
  text-align: center;
  transition: 0.3s;
}
.member-manage .certificate-box.view-img .mask {
  cursor: zoom-in;
  opacity: 0;
}
.member-manage .certificate-box.view-img:hover .mask {
  opacity: 1;
}
.member-manage .mask .iconfont {
  font-size: 28px;
  color: #fff;
}
.member-manage .mask .mask-info {
  margin-top: 4px;
  font-size: 14px;
  color: #fff;
  font-weight: 600;
}
.member-manage .mask .mask-info.mt {
  margin-top: 20px;
}
.member-manage .download .btn-down {
  width: 150px;
  height: 36px;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  border-radius: 4px;
  line-height: 36px;
  font-size: 12px;
  color: #fff;
}
.member-manage .download .down-warning {
  margin-top: 4px;
  font-size: 12px;
  color: #535d71;
}
.member-manage .team-desc {
  padding-bottom: 56px;
}
.member-manage .team-con {
  margin: 0 auto;
  width: calc(100% - 72px);
  background-color: #f5f7f9;
  border-radius: 6px;
  position: relative;
  padding: 32px 52px 2px;
}
.member-manage .team-con .info {
  font-size: 14px;
  color: #11182e;
  margin-bottom: 25px;
}
.member-manage .team-con .info .l-name {
  display: inline-block;
  width: 86px;
  font-weight: 600;
}
.member-manage .team-con .info .manager-avatar {
  margin-right: 15px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.member-manage .team-con .info .vip-type {
  margin-left: 8px;
  height: 14px;
}
.member-manage .team-con .info span {
  margin-right: 58px;
}
.member-manage .team-con .exit-team {
  padding: 0 32px;
  height: 36px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e3e6e9;
  font-size: 12px;
  color: #0058ff;
  line-height: 36px;
}
.member-manage .team-info {
  margin: 0 auto 36px;
  width: calc(100% - 72px);
  height: 70px;
  background: #f5f7f9;
  border-radius: 6px;
  padding: 0 27px;
  line-height: 70px;
  font-size: 14px;
  color: #202937;
}
.member-manage .team-info .text {
  margin-right: 60px;
}
.member-manage .team-info .iconfont {
  margin-right: 10px;
  font-size: 20px;
}
.member-manage .team-info .btn {
  padding: 0 16px;
  height: 36px;
  background: #fff;
  border-radius: 4px;
  line-height: 36px;
  font-size: 12px;
  color: #0e5efc;
  position: relative;
}
.member-manage .team-info .btn:hover,
.member-manage .team-li .btn-delete:hover {
  background: linear-gradient(270deg, #3a7fff, #275af0);
  color: #fff;
}
.member-manage .team-info .btn .dot {
  position: absolute;
  top: 10px;
  right: 7px;
  width: 6px;
  height: 6px;
  background: #de3b0d;
  border-radius: 50%;
}
.member-manage .team-list {
  margin: 0 auto;
  width: calc(100% - 72px);
}
.member-manage .team-list .team-li {
  float: left;
  margin: 0 29px 24px 0;
  width: 260px;
  height: 82px;
  border-radius: 6px;
  border: 1px solid #f5f7f9;
  position: relative;
  padding: 22px 84px 0 80px;
}
.member-manage .team-list .team-li:nth-of-type(4n) {
  margin-right: 0;
}
.member-manage .team-list.overdue .btn-delete {
  display: none;
}
.member-manage .team-li .avatar {
  position: absolute;
  top: 19px;
  left: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.member-manage .team-li .tl-info {
  width: 100%;
  margin-bottom: 8px;
  font-size: 14px;
  color: #202937;
  white-space: nowrap;
}
.member-manage .team-li .tl-info .uname {
  display: inline-block;
  max-width: calc(100% - 22px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-manage .team-li .tl-info img {
  vertical-align: 0;
  height: 14px;
  margin-left: 4px;
}
.member-manage .team-li .btn-delete {
  width: 64px;
  height: 25px;
  background: #f1f3f4;
  border-radius: 4px;
  line-height: 25px;
  font-size: 12px;
  color: #202937;
}
.components-user-team-pop .common-pop {
  position: relative;
}
.components-user-team-pop .common-pop .btn-close {
  position: absolute;
  top: 18px;
  right: 18px;
  cursor: pointer;
  transition: 0.3s;
}
.components-user-team-pop .common-pop .btn-close:hover {
  transform: rotate(180deg);
}
.components-user-team-pop .common-pop .btn-close i {
  font-size: 14px;
  color: #000;
}
.components-user-team-pop .apply-records-pop {
  width: 886px;
  padding: 0 30px 25px;
}
.components-user-team-pop .apply-records-pop .title {
  padding: 35px 0 30px;
  font-size: 16px;
  color: #202937;
}
.components-user-team-pop .apply-records-pop .thead {
  border-bottom: 1px solid #f5f7f9;
  padding-bottom: 12px;
  display: flex;
  font-size: 14px;
  color: #a1a8b2;
  text-align: center;
}
.components-user-team-pop .apply-records-pop .list-box {
  margin-top: 15px;
  max-height: 370px;
  overflow-y: auto;
}
.components-user-team-pop .apply-records-pop .tr {
  display: flex;
  padding: 16px 0;
  line-height: 42px;
  text-align: center;
}
.components-user-team-pop .apply-records-pop .td:first-of-type {
  text-align: left;
  padding-left: 14px;
}
.components-user-team-pop .apply-records-pop .td.w20 {
  width: 20%;
}
.components-user-team-pop .apply-records-pop .td.w30 {
  width: 30%;
}
.components-user-team-pop .apply-records-pop .td .avatar {
  float: left;
  margin-right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.components-user-team-pop .apply-records-pop .td .uinfo {
  font-size: 14px;
  color: #202937;
  line-height: 20px;
}
.components-user-team-pop .apply-records-pop .tr .td:last-of-type {
  display: flex;
  justify-content: space-around;
  padding: 8px 10px 0 20px;
}
.components-user-team-pop .apply-records-pop .td .btn-agree {
  width: 77px;
  height: 25px;
  background: #00d5b0;
  border-radius: 4px;
  line-height: 25px;
  font-size: 12px;
  color: #fff;
}
.components-user-team-pop .apply-records-pop .td .btn-refuse {
  width: 77px;
  height: 25px;
  background: #ee663f;
  border-radius: 4px;
  line-height: 25px;
  font-size: 12px;
  color: #fff;
}
.components-user-team-pop .exit-team-pop {
  width: 316px;
  text-align: center;
  padding: 36px 0 24px;
}
.components-user-team-pop .exit-team-pop .title {
  font-size: 16px;
  color: #202937;
  letter-spacing: 1px;
  font-weight: 600;
}
.components-user-team-pop .exit-team-pop .desc {
  font-size: 14px;
  color: #11182e;
  margin: 22px 0 33px;
}
.components-user-team-pop .exit-team-pop .desc span:first-of-type {
  margin-right: 45px;
}
.components-user-team-pop .exit-team-pop .btn-group {
  display: flex;
  justify-content: space-around;
}
.components-user-team-pop .exit-team-pop .btn-reset {
  width: 100px;
  height: 32px;
  background: #dbdfe4;
  border-radius: 4px;
  line-height: 32px;
  font-size: 12px;
  color: #11182e;
}
.components-user-team-pop .exit-team-pop .btn-submit {
  width: 100px;
  height: 32px;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  border-radius: 4px;
  line-height: 32px;
  font-size: 12px;
  color: #fff;
}
.exchange-center {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 42px;
  padding: 120px 44px;
}
.exchange-center .operate-box {
  margin: 0 auto 92px;
  display: flex;
  justify-content: center;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  color: #0a1d36;
  white-space: nowrap;
}
.exchange-center .operate-box input {
  width: 472px;
  height: 100%;
  border: 1px solid #d8dee5;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
}
.exchange-center .operate-box .btn-exchange {
  width: 150px;
  height: 100%;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  border-radius: 0 4px 4px 0;
  text-align: center;
  line-height: 50px;
  font-size: 14px;
  color: #fff;
}
.exchange-center .operate-box .btn-exchange.disable {
  background: #dee2e7;
  color: #202937;
}
.exchange-center .record-table {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #e3e9f4;
  text-align: center;
}
.exchange-center .record-table .subtitle {
  line-height: 75px;
  padding-left: 56px;
  text-align: left;
  font-size: 16px;
  color: #0a1d36;
  border-bottom: 1px solid #e2e9f5;
}
.exchange-center .exchange-table {
  width: 100%;
}
.exchange-center .exchange-table td {
  width: 40%;
  line-height: 64px;
  text-align: center;
  border-bottom: 1px dotted #e2e9f5;
}
.exchange-center .exchange-table tr td:first-of-type {
  width: 20%;
}
.exchange-center .exchange-table thead td {
  font-size: 14px;
  color: #757575;
}
.exchange-center .exchange-table tbody td {
  font-size: 14px;
  color: #031d38;
}
.exchange-center .exchange-table tbody td:last-of-type td {
  border: none;
}
.exchange-center .record-table img {
  margin: 46px auto 0;
  display: block;
  width: 438px;
}
.exchange-center .pagination {
  text-align: center;
  margin: 60px auto 50px;
}
.components-user-exchange-pop .pop {
  width: 392px;
  padding: 40px 34px 34px;
  text-align: center;
  position: relative;
}
.components-user-exchange-pop .pop .btn-close {
  position: absolute;
  top: 18px;
  right: 18px;
  cursor: pointer;
  transition: 0.3s;
}
.components-user-exchange-pop .pop .btn-close:hover {
  transform: rotate(180deg);
}
.components-user-exchange-pop .pop .btn-close i {
  font-size: 14px;
  color: #000;
}
.components-user-exchange-pop .pop .title {
  font-size: 20px;
  color: #202937;
  font-weight: 600;
  margin-bottom: 28px;
}
.components-user-exchange-pop .pop .title .iconfont {
  font-size: 28px;
  color: #31d1b1;
  font-weight: 400;
}
.components-user-exchange-pop .pop .desc {
  margin-bottom: 35px;
  font-size: 14px;
  color: #535d71;
}
.components-user-exchange-pop .pop .btn {
  width: 256px;
  height: 40px;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  border-radius: 4px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  color: #fff;
}
.components-user-exchange-pop .pop .text {
  font-size: 12px;
  color: #535d71;
  text-decoration: underline;
}
.components-user-invoicemanage .invoice-content .ic-main {
  background: #fff;
  margin-bottom: 42px;
  padding: 56px 44px;
  border-radius: 12px;
}
.components-user-invoicemanage .invoice-content .ic-tit {
  font-size: 16px;
  color: #1e2938;
  position: relative;
}
.components-user-invoicemanage .invoice-content .ic-tit .warn {
  margin-left: 10px;
  font-size: 14px;
  color: #a2a8b1;
  font-weight: 400;
}
.components-user-invoicemanage .invoice-content .ic-tit .apply-record {
  display: block;
  width: 135px;
  height: 32px;
  background: rgba(0, 87, 255, 0.09);
  border-radius: 4px;
  white-space: nowrap;
  font-size: 14px;
  color: #0058ff;
  text-align: center;
  line-height: 32px;
}
.components-user-invoicemanage .invoice-content .ic-con {
  margin-top: 42px;
  border-radius: 6px;
  border: 1px solid #edf1f4;
  padding: 32px 42px;
}
.components-user-invoicemanage .invoice-content .subtitle {
  font-size: 14px;
  color: #1e2938;
  margin-bottom: 32px;
}
.components-user-invoicemanage .line {
  width: 100%;
  min-height: 42px;
  padding-left: 100px;
  position: relative;
  margin-bottom: 24px;
}
.components-user-invoicemanage .line .l-name {
  float: left;
  margin-left: -100px;
  width: 84px;
  text-align: right;
  line-height: 42px;
  white-space: nowrap;
  font-size: 14px;
  color: #a2a8b1;
}
.components-user-invoicemanage .line input {
  width: 375px;
  height: 42px;
  background: #f0f2f5;
  border-radius: 4px;
  font-size: 14px;
  color: #11182e;
  border: none;
}
.components-user-invoicemanage .line input.sm {
  width: 196px;
}
.components-user-invoicemanage .line input::placeholder {
  color: #b1bbc7;
}
.components-user-invoicemanage .line span {
  line-height: 42px;
  font-size: 14px;
  color: #26313f;
}
.components-user-invoicemanage .line span.warn {
  margin-left: 18px;
  font-size: 12px;
  color: #b1bbc7;
}
.components-user-invoicemanage .line .nessary {
  margin-left: 16px;
  line-height: 42px;
  font-size: 14px;
  color: #ee663f;
}
.components-user-invoicemanage .line.focus .error {
  display: block;
}
.components-user-invoicemanage .line .error {
  display: none;
  position: absolute;
  bottom: -17px;
  left: 100px;
  font-size: 12px;
  color: #ee663f;
}
.components-user-invoicemanage .line .error .iconfont {
  font-size: 12px;
}
.components-user-invoicemanage .info {
  font-size: 14px;
  color: #a1a8b2;
}
.components-user-invoicemanage .go-custom {
  margin-left: 3px;
  font-size: 14px;
  color: #0058ff;
  cursor: pointer;
}
.components-user-invoicemanage .btn-submit {
  width: 256px;
  height: 40px;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  border-radius: 4px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  color: #fff;
}
.components-user-invoicemanage .btn-submit.disable {
  background: #b1bbc7;
}
.components-user-invoicemanage .bottom-warning {
  font-size: 14px;
  color: #26313f;
  padding-left: 44px;
}
.components-user-invoicemanage .record-li {
  margin-top: 42px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #edf1f4;
  padding: 62px 96px;
}
.components-user-invoicemanage .record-li .rl-info {
  float: left;
  width: 50%;
  font-size: 14px;
  color: #1e2938;
  font-weight: 600;
  line-height: 20px;
  margin-bottom: 24px;
}
.components-user-invoicemanage .record-li .rl-info .l-tit {
  color: #a2a8b1;
  float: left;
  width: 120px;
  padding-right: 12px;
  text-align: right;
}
.components-user-invoicemanage .record-li .rl-info .status {
  color: #0058ff;
}
.components-user-invoicemanage .unit {
  margin: 0 10px;
}
.components-user-invoicemanage .empty-pic {
  display: block;
  margin: 40px auto 0;
  width: 440px;
}
.components-user-invoicemanage .empty {
  font-size: 16px;
  text-align: center;
}
.order-manage .mm-con {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 42px;
  padding: 45px 36px;
}
.order-manage .mm-con .subtitle {
  font-size: 16px;
  color: #1e2938;
}
.order-manage .mm-con .order-record {
  margin-top: 28px;
  width: 100%;
}
.order-manage .mm-con .order-record td {
  width: 12.5%;
  text-align: center;
  vertical-align: middle;
}
.order-manage .mm-con .order-record tr td:last-of-type {
  width: 25%;
}
.order-manage .mm-con .order-record thead td {
  background: #202937;
  line-height: 50px;
  font-size: 14px;
  color: #fff;
  border: 1px solid #202937;
}
.order-manage .mm-con .order-record tbody td {
  font-size: 14px;
  color: #1e2938;
  font-weight: 600;
  border: 1px solid #ecf1f5;
  padding: 28px 0;
}
.order-manage .mm-con .order-record tbody .tit td {
  padding: 0;
  color: #a2a8b1;
  line-height: 48px;
}
.order-manage .mm-con .order-record tbody .tit .tit-l {
  text-align: left;
  padding-left: 10px;
  border-right: none;
}
.order-manage .mm-con .order-record tbody .tit .tit-r {
  border-left: none;
}
.order-manage .mm-con .btn-groups {
  display: flex;
  justify-content: space-around;
}
.order-manage .mm-con .btn-upload {
  background: linear-gradient(270deg, #3a7fff, #275af0);
  color: #fff;
}
.order-manage .mm-con .btn-upload,
.order-manage .mm-con .reset-order {
  width: 112px;
  height: 32px;
  border-radius: 4px;
  text-align: center;
  line-height: 32px;
  font-size: 12px;
}
.order-manage .mm-con .reset-order {
  background: #ecf1f5;
  color: #202937;
}
.order-manage .mm-con .custom {
  width: 75px;
  height: 22px;
  background: #fff;
  border-radius: 13px;
  border: 1px solid #265eef;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #265eef;
}
.order-manage .mm-con .state {
  margin-bottom: 10px;
  color: #2c2c2e;
}
.order-manage .mm-con .other {
  color: #7a8596;
}
.order-manage .mm-con .warning {
  padding-left: 36px;
  font-size: 14px;
  color: #26313f;
}
.order-manage .mm-con .warning span {
  margin-left: 8px;
  color: #0058ff;
  cursor: pointer;
}
.order-manage .mm-con .empty-con {
  text-align: center;
  padding-top: 50px;
}
.order-manage .mm-con .empty-con img {
  width: 564px;
}
.order-manage .mm-con .empty-con .info {
  margin: -80px auto 28px;
  font-size: 16px;
  color: #293342;
}
.order-manage .mm-con .empty-con .btn {
  width: 296px;
  height: 47px;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  border-radius: 4px;
  color: #fff;
  line-height: 47px;
}
.pages-vip-index-content .vip-content {
  background-color: #fff;
}
.pages-vip-index-content .vip-content .banner {
  background-color: #f7f3f0;
  text-align: center;
  padding: 0 0 72px;
}
.pages-vip-index-content .vip-content .banner .banner-logo {
  height: 72px;
  text-align: center;
}
.pages-vip-index-content .vip-content .banner .banner-con {
  margin: 25px auto;
  height: 473px;
  background: #fff;
  border-radius: 8px;
  padding: 28px 0 28px 21px;
  position: relative;
}
.pages-vip-index-content .vip-content .banner-con .fl-con {
  float: left;
  width: 904px;
  border-radius: 8px;
  overflow: hidden;
}
.pages-vip-index-content .vip-content .banner-con .fl-con img {
  width: 100%;
}
.pages-vip-index-content .vip-content .banner-con .fr-con {
  float: right;
  width: calc(100% - 904px);
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding-left: 21px;
}
.pages-vip-index-content .vip-content .banner-con .privillege-li {
  display: block;
  width: 234px;
  height: 114px;
  background: #fcfaf9;
  border-radius: 6px;
  margin-bottom: 37px;
  text-align: center;
  color: #bfad9f;
  padding-top: 28px;
  cursor: pointer;
}
.pages-vip-index-content .vip-content .banner-con .privillege-li:last-of-type {
  margin-bottom: 0;
}
.pages-vip-index-content .vip-content .banner-con .privillege-li.on {
  color: #211815;
  box-shadow: 0 0 10px 0 rgba(218, 203, 191, 0.6);
}
.pages-vip-index-content .vip-content .banner-con .privillege-li .iconfont {
  font-size: 30px;
  color: inherit;
}
.pages-vip-index-content .vip-content .banner-con .priv-desc {
  margin-top: 9px;
  font-size: 18px;
  font-weight: 700;
}
.pages-vip-index-content .vip-content .banner .auth-demo,
.pages-vip-index-content .vip-content .banner .view-auth {
  position: absolute;
  bottom: -32px;
  right: 0;
  font-size: 14px;
  color: #b2a89e;
  text-decoration: underline;
  cursor: pointer;
}
.pages-vip-index-content .vip-content .banner .auth-demo {
  margin-right: 120px;
}
.pages-vip-index-content .vip-content .go-pay {
  display: block;
  margin: 0 auto;
  width: 395px;
  height: 54px;
  background: #3661e7;
  border-radius: 27px;
  text-align: center;
  line-height: 54px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 1px;
}
.pages-vip-index-content .vip-content .go-pay b {
  font-size: 34px;
  font-weight: 400;
  vertical-align: -2px;
}
.pages-vip-index-content .vip-content .subtitle {
  padding-top: 48px;
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  color: #0d0d22;
}
.pages-vip-index-content .vip-content .comparison-pic {
  display: block;
  width: 1200px;
  margin: 38px auto 73px;
}
.pages-vip-index-content .vip-content .auth-con {
  background-color: #f7f3f0;
  padding: 54px 0 72px;
  text-align: center;
}
.pages-vip-index-content .vip-content .classify-list {
  display: flex;
  justify-content: space-between;
}
.pages-vip-index-content .vip-content .classify-list .classify-li {
  width: 360px;
  height: 662px;
  background: #fff;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.pages-vip-index-content .vip-content .classify-list .classify-li:hover {
  box-shadow: 0 0 27px 0 rgba(240, 235, 232, 0.45);
}
.pages-vip-index-content .vip-content .classify-list .classify-li.free {
  padding-top: 55px;
}
.pages-vip-index-content .vip-content .classify-list .classify-li.personal,
.pages-vip-index-content .vip-content .classify-list .classify-li.team {
  padding-top: 30px;
}
.pages-vip-index-content .vip-content .classify-list .classify-li img {
  height: 34px;
  margin-bottom: 20px;
}
.pages-vip-index-content .vip-content .classify-li.free .title {
  font-size: 26px;
  color: #323232;
}
.pages-vip-index-content .vip-content .classify-li .title {
  font-size: 24px;
  color: #0d0d22;
  font-weight: 600;
}
.pages-vip-index-content .vip-content .classify-li.free .info {
  margin: 20px 0 68px;
  font-size: 14px;
  color: #0d0d22;
}
.pages-vip-index-content .vip-content .classify-li.personal .info {
  margin: 10px 0 48px;
  font-size: 12px;
  color: #4c42c2;
  font-weight: 600;
}
.pages-vip-index-content .vip-content .classify-li.team .info {
  margin: 10px 0 48px;
  font-size: 12px;
  color: #8d6846;
  font-weight: 600;
}
.pages-vip-index-content .vip-content .classify-li .priv-con {
  width: 100%;
  height: 315px;
  padding: 0 52px;
}
.pages-vip-index-content .vip-content .classify-li .priv-con p {
  margin-top: 30px;
  text-align: right;
  font-size: 16px;
  color: #0d0d22;
  font-weight: bolder;
}
.pages-vip-index-content .vip-content .classify-li .priv-con .fl {
  margin-left: -32px;
  width: 130px;
  font-weight: 400;
  white-space: nowrap;
}
.pages-vip-index-content .vip-content .classify-li .price {
  font-size: 40px;
  color: #d92f63;
  font-weight: bolder;
}
.pages-vip-index-content .vip-content .classify-li.free .price {
  margin-top: 27px;
  line-height: 32px;
  font-size: 32px;
  color: #201642;
}
.pages-vip-index-content .vip-content .classify-li .price span {
  font-size: 16px;
  font-weight: 500;
  color: #201642;
  vertical-align: 2px;
}
.pages-vip-index-content .vip-content .classify-li .average-price {
  margin-top: 12px;
  font-size: 14px;
  color: #3d3b46;
}
.pages-vip-index-content .vip-content .classify-li .btn-download {
  width: 257px;
  height: 46px;
  background: #f7f3f0;
  border-radius: 8px;
  font-size: 16px;
  color: #0d0d22;
  text-align: center;
  line-height: 46px;
}
.pages-vip-index-content .vip-content .classify-li .btn-download:hover {
  background: #3661e7;
  color: #fff;
}
.pages-vip-index-content .vip-content .classify-li .btn {
  width: 257px;
  height: 46px;
  background: #3661e7;
  border-radius: 8px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: 46px;
}
.pages-vip-index-content .vip-content .auth-title {
  margin: 68px auto 60px;
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #0d0d22;
}
.pages-vip-index-content .vip-content .explain-con {
  height: 484px;
  border-radius: 12px;
  position: relative;
  padding: 170px 364px 0 57px;
  text-align: left;
}
.pages-vip-index-content .vip-content .explain-con p {
  line-height: 38px;
  font-size: 16px;
  color: #0c0c21;
  font-weight: 400;
  letter-spacing: 1px;
  text-indent: 2em;
  position: relative;
  z-index: 2;
}
.pages-vip-index-content .vip-content .font-tit {
  padding: 68px 0 36px;
  text-align: center;
  font-size: 28px;
  color: #0d0d22;
  letter-spacing: 2px;
}
.pages-vip-index-content .vip-content .fonts {
  width: 100%;
  overflow: hidden;
  margin-bottom: 62px;
}
.pages-vip-index-content .vip-content .fonts img {
  width: 100%;
}
.pages-vip-index-content .vip-content .left-pic {
  width: 363px;
  margin-bottom: 60px;
}
.pages-vip-index-content .vip-content .friends-con {
  float: right;
  margin-left: 46px;
  width: 790px;
  height: 432px;
  background: #fff;
  border-radius: 8px;
  position: relative;
}
.pages-vip-index-content .vip-content .friends-con:before {
  position: absolute;
  content: '';
  z-index: 1;
  left: -21px;
  top: 40px;
  width: 21px;
  height: 361px;
  background: #fafafb;
  border-radius: 12px 0 0 12px;
}
.pages-vip-index-content .vip-content .friends-con .img-box {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 32px 0 rgba(209, 206, 204, 0.45);
  padding-top: 50px;
  position: relative;
  z-index: 2;
}
.pages-vip-index-content .vip-content .friends-con img {
  width: 100%;
}
.pages-vip-index-content .vip-content .fixed-bottom {
  position: fixed;
  bottom: 0;
  z-index: 10;
  width: 100%;
  height: 93px;
  border-top: 1px solid #f7f3f0;
  background-color: #fff;
  box-shadow: 0 -7px 21px 0 rgba(224, 218, 214, 0.27);
  color: #0c0c21;
}
.pages-vip-index-content .vip-content .fixed-bottom .flex-box {
  display: flex;
  justify-content: space-between;
}
.pages-vip-index-content .vip-content .fixed-bottom .bottom-ifonts {
  height: 37px;
  vertical-align: text-bottom;
  margin-right: 15px;
}
.pages-vip-index-content .vip-content .fixed-bottom .fl-info {
  font-size: 22px;
  line-height: 103px;
}
.pages-vip-index-content .vip-content .fixed-bottom .fr-info {
  font-size: 16px;
  margin-right: 46px;
  line-height: 93px;
}
.pages-vip-index-content .vip-content .fixed-bottom i {
  font-size: 30px;
  font-weight: 600;
  color: #d92f63;
}
.pages-vip-index-content .vip-content .fixed-bottom b {
  font-size: 40px;
  color: #d92f63;
}
.pages-vip-index-content .vip-content .fixed-bottom .go-pay {
  vertical-align: middle;
  display: inline-block;
  width: 176px;
  height: 44px;
  border-radius: 22px;
  background-color: #3661e7;
  text-align: center;
  line-height: 44px;
  font-size: 16px;
  color: #fff;
}
.pages-team-pay-content .main-content .must-pay {
  margin-top: 71px;
}
.pages-team-pay-content .pay-content .amount-select .shop-rule {
  color: #000;
  margin-right: 23px;
  margin-left: 31px;
}
.pages-team-pay-content .pay-money {
  display: block;
  margin-top: 12px;
  position: relative;
}
.pages-team-pay-content .pay-money .rule {
  font-size: 12px;
  color: #cd7067;
  position: absolute;
  top: -24px;
  left: 5px;
}
.pages-team-pay-content .main-content .info .teamNumber {
  font-size: 14px;
  color: #8690a8;
  margin-left: 10px;
}
.pages-team-pay-content .pay-content {
  padding: 50px 0;
  background-color: #eef0f5;
}
.pages-team-pay-content .top {
  width: 100%;
  height: 80px;
  background-color: #f9fafb;
  position: relative;
  margin-bottom: 54px;
}
.pages-team-pay-content .top .logo {
  position: absolute;
  top: 25px;
  left: 55px;
  width: 104px;
}
.pages-team-pay-content .top .logo img {
  width: 100%;
}
.pages-team-pay-content .top .title {
  line-height: 80px;
  font-size: 20px;
  color: #4c72ec;
  text-align: center;
}
.pages-team-pay-content .main-content {
  margin: 0 auto;
  width: 1000px;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
.pages-team-pay-content .main-content .info {
  display: block;
  margin-top: 32px;
  padding: 0 105px 0 205px;
  line-height: 16px;
  font-size: 14px;
  color: #0e152c;
  font-weight: 600;
}
.pages-team-pay-content .main-content .l-name {
  float: left;
  margin-left: -100px;
  width: 100px;
  text-align: left;
  font-size: 14px;
  color: #868fa8;
}
.pages-team-pay-content .main-content .line {
  margin: 32px auto;
  width: 860px;
  height: 1px;
  background: #eef0f5;
}
.pages-team-pay-content .main-content .hidden {
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
}
.pages-team-pay-content .classify-box {
  position: relative;
  height: 94px;
}
.pages-team-pay-content .classify-box.more:before {
  position: absolute;
  content: '';
  width: 30px;
  height: calc(100% - 16px);
  top: 8px;
  right: 0;
  background: linear-gradient(
    90deg,
    hsla(0, 0%, 100%, 0),
    hsla(0, 0%, 100%, 0.8)
  );
  z-index: 2;
}
.pages-team-pay-content .classify-li {
  margin: 1px;
  width: calc(100% - 20px);
  height: 92px;
  border: 1px solid #e5e3e1;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  padding-left: 26px;
}
.pages-team-pay-content .center .classify-li {
  margin: 1px auto;
}
.pages-team-pay-content .classify-li.on,
.pages-team-pay-content .classify-li:hover {
  background: #f9faff;
  border-color: #3661e7;
  box-shadow: 0 0 1px 1px #3661e7;
}
.pages-team-pay-content .classify-li .recom-tag {
  position: absolute;
  right: -1px;
  top: -1px;
  right: -2px;
  top: -2px;
  padding: 0 10px;
  height: 20px;
  background: linear-gradient(90deg, #fd805c, #ffa262);
  border-radius: 4px;
  line-height: 20px;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
}
.pages-team-pay-content .classify-li .expire {
  padding: 20px 0 15px;
  font-size: 16px;
  color: #0c0c21;
}
.pages-team-pay-content .classify-li .price {
  font-size: 14px;
  color: #868fa8;
  white-space: nowrap;
}
.pages-team-pay-content .classify-li .price.pl {
  margin-left: -12px;
}
.pages-team-pay-content .classify-li .price b {
  margin: 0 2px;
  font-size: 22px;
  color: #d65244;
  letter-spacing: 0.5px;
}
.pages-team-pay-content .classify-li .price .average {
  font-size: 12px;
  color: #9e9ea6;
}
.pages-team-pay-content .amount-select.info {
  line-height: 30px;
}
.pages-team-pay-content .pay-content .amount-select {
  height: 30px;
  display: flex;
  justify-content: start;
  line-height: 30px;
  font-size: 14px;
  color: #868fa8;
}
.pages-team-pay-content .pay-content .amount-select .btn {
  margin: 0 5px;
  display: inline-block;
  width: 28px;
  height: 100%;
  border-radius: 4px;
  text-align: center;
  line-height: 26px;
  background-color: #fff;
  border: 1px solid #eef0f5;
  color: #000;
  font-size: 20px;
}
.pages-team-pay-content .pay-content .amount-select .btn:hover {
  background-color: #f4f7ff;
  border-color: #3661e7;
  color: #3060f8;
}
.pages-team-pay-content .pay-content .amount-con {
  margin: -1px 10px;
  width: 88px;
  height: 100%;
  position: relative;
}
.pages-team-pay-content .pay-content .amount-con input {
  width: 98px;
  height: 100%;
  border-radius: 4px;
  border: 1px solid #eef0f5;
  background-color: #fff;
  text-align: center;
  text-indent: 0;
  font-size: 16px;
  color: #000;
}
.pages-team-pay-content .pay-content .amount-con .tip-pop {
  position: absolute;
  top: -28px;
  left: 55%;
  transform: translateX(-50%);
  padding: 0 5px;
  line-height: 22px;
  border-radius: 4px;
  background-color: #f4f7ff;
  font-size: 12px;
  color: #4c72ec;
  white-space: nowrap;
}
.pages-team-pay-content .pay-content .amount-con .tip-pop:before {
  position: absolute;
  content: '';
  bottom: -4px;
  margin-left: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  background-color: #f4f7ff;
  border-radius: 0 0 2px 0;
  transform: rotate(45deg);
}
.pages-team-pay-content .pay-content .amount-select b {
  margin: 0 2px;
  color: #161616;
}
.pages-team-pay-content .pay-content .amount-select .discount {
  color: #d65244;
}
.pages-team-pay-content .pay-money {
  font-size: 12px;
  color: #868fa8;
}
.pages-team-pay-content .pay-money b {
  font-size: 22px;
  color: #d65244;
  font-weight: 600;
}
.pages-team-pay-content .pay-money s {
  font-size: 16px;
  color: #868fa8;
  margin: 0 10px;
}
.pages-team-pay-content .main-content .info.lh25 {
  line-height: 25px;
}
.pages-team-pay-content .pay-box {
  margin-top: 46px;
  text-align: center;
  transition: 0.3s;
}
.pages-team-pay-content .pay-content .pay-box .payment {
  margin: 26px 0;
  display: flex;
  justify-content: start;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  color: #9e9ea6;
}
.pages-team-pay-content .pb-li {
  display: inline-block;
  vertical-align: middle;
  width: 166px;
  height: 210px;
  position: relative;
}
.pages-team-pay-content .pb-li:last-of-type {
  margin-left: 13%;
  cursor: pointer;
}
.pages-team-pay-content .pb-li .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 166px;
  background-color: rgba(0, 0, 0, 0.78);
  text-align: center;
  line-height: 166px;
  font-size: 14px;
  color: #f7f3f0;
  text-decoration: underline;
}
.pages-team-pay-content .weixin {
  width: 100%;
  height: 166px;
  border: 1px solid #53a949;
}
.pages-team-pay-content .weixin img {
  width: 100%;
}
.pages-team-pay-content .weixin-desc {
  margin-top: 12px;
  text-align: center;
  font-size: 18px;
  color: #3e3e3e;
}
.pages-team-pay-content .weixin-desc i {
  margin-right: 6px;
  vertical-align: middle;
  font-size: 28px;
  color: #50b326;
}
.pages-team-pay-content .alipay {
  width: 100%;
  height: 166px;
  border: 1px solid #4b88e8;
  text-align: center;
  padding: 28px 36px;
}
.pages-team-pay-content .alipay img {
  width: 100%;
}
.pages-team-pay-content .alipay-desc {
  margin-top: 8px;
  width: 100%;
  height: 36px;
  background: #4b88e8;
  text-align: center;
  line-height: 36px;
  font-size: 16px;
  color: #fff;
}
.pages-team-pay-content .pay-content .agreement {
  margin: 62px 0 12px;
  padding: 0 105px;
  font-size: 12px;
  color: #868fa8;
  cursor: pointer;
  position: relative;
}
.pages-team-pay-content .pay-content .agreement i {
  color: #4c72ec;
  margin-right: 8px;
  font-size: 12px;
}
.pages-team-pay-content .pay-content .agreement a {
  color: #808081;
}
.pages-team-pay-content .pay-content .agreement:hover .pop {
  display: block;
}
.pages-team-pay-content .pay-content .agreement .pop {
  display: none;
  position: absolute;
  top: -42px;
  left: 86px;
  padding: 0 12px;
  background-color: #fff;
  border: 1px solid #f7f3f0;
  border-radius: 4px;
  line-height: 32px;
  white-space: nowrap;
  font-size: 12px;
  color: #aa9e95;
}
.pages-team-pay-content .pay-content .agreement .pop:before {
  position: absolute;
  content: '';
  bottom: -5px;
  left: 18px;
  width: 8px;
  height: 8px;
  background-color: #fff;
  transform: rotate(45deg);
  border-right: 1px solid #eef0f2;
  border-bottom: 1px solid #eef0f2;
  border-radius: 0 0 4px 0;
}
.pages-team-pay-content .pay-content .warning {
  padding: 0 105px 63px;
  font-size: 12px;
  color: #868fa8;
}
.pages-team-pay-content .pay-content .warning a {
  color: #3060f8;
  text-decoration: underline;
}
.pages-team-add-user-orderpop .order-pop,
.pages-team-index-orderpop .order-pop,
.pages-team-pay-orderpop .order-pop {
  width: 392px;
  padding: 40px 34px 34px;
  text-align: center;
  position: relative;
}
.pages-team-add-user-orderpop .order-pop .btn-close,
.pages-team-index-orderpop .order-pop .btn-close,
.pages-team-pay-orderpop .order-pop .btn-close {
  position: absolute;
  top: 18px;
  right: 18px;
  cursor: pointer;
  transition: 0.3s;
}
.pages-team-add-user-orderpop .order-pop .btn-close:hover,
.pages-team-index-orderpop .order-pop .btn-close:hover,
.pages-team-pay-orderpop .order-pop .btn-close:hover {
  transform: rotate(180deg);
}
.pages-team-add-user-orderpop .order-pop .btn-close i,
.pages-team-index-orderpop .order-pop .btn-close i,
.pages-team-pay-orderpop .order-pop .btn-close i {
  font-size: 14px;
  color: #000;
}
.pages-team-add-user-orderpop .order-pop .title,
.pages-team-index-orderpop .order-pop .title,
.pages-team-pay-orderpop .order-pop .title {
  font-size: 18px;
  color: #121c3b;
  font-weight: 600;
  margin-bottom: 32px;
}
.pages-team-add-user-orderpop .order-pop .desc,
.pages-team-index-orderpop .order-pop .desc,
.pages-team-pay-orderpop .order-pop .desc {
  margin-bottom: 14px;
  font-size: 14px;
  color: #535d71;
}
.pages-team-add-user-orderpop .order-pop .btn,
.pages-team-index-orderpop .order-pop .btn,
.pages-team-pay-orderpop .order-pop .btn {
  width: 244px;
  height: 46px;
  background: #4d73ec;
  border-radius: 6px;
  text-align: center;
  line-height: 46px;
  font-size: 14px;
  color: #fff;
}
.pages-pay-content .pay-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.pages-pay-content .pay-content * {
  transition: 0.3s;
}
.pages-pay-content .pay-content > div {
  display: flex;
  height: 100%;
}
.pages-pay-content .pay-content .fl-bg {
  width: 26%;
  height: 100%;
  background-color: #f7f3f0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pages-pay-content .pay-content .fl-bg .pic1 {
  width: 99%;
  max-width: 511px;
}
.pages-pay-content .pay-content .fl-bg .pic2 {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 84.6%;
  max-width: 435.5px;
}
.pages-pay-content .pay-content .fr-con {
  width: 74%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  position: relative;
}
.pages-pay-content .pay-content .fr-con .inner-con {
  width: 71%;
  max-height: 815px;
}
.pages-pay-content .pay-content .fr-con .closeX {
  position: absolute;
  top: 4%;
  right: 4%;
  width: 42px;
  height: 42px;
  background: #f7f7f7;
  border-radius: 9px;
  text-align: center;
  line-height: 45px;
}
.pages-pay-content .pay-content .fr-con .closeX i {
  color: #aa9e95;
  font-size: 18px;
}
.pages-pay-content .pay-content .fr-con .pay-tit {
  height: 44px;
}
.pages-pay-content .pay-content .fr-con .main-title {
  margin: 25px 0 56px;
  font-size: 44px;
  color: #161616;
  letter-spacing: 2px;
}
.pages-pay-content .pay-content .fr-con .auth-type {
  height: 40px;
  display: flex;
}
.pages-pay-content .pay-content .fr-con .auth-li {
  width: 132px;
  height: 40px;
  background: #fff;
  border: 1px solid #e5e3e1;
  border-radius: 6px;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  color: #afafb5;
}
.pages-pay-content .pay-content .fr-con .auth-li.on,
.pages-pay-content .pay-content .fr-con .auth-li:hover {
  background: #3661e7;
  border-color: #3661e7;
  color: #fff;
}
.pages-pay-content .pay-content .fr-con .auth-li img {
  height: 18px;
  margin-right: 10px;
}
.pages-pay-content .pay-content .fr-con .user-info {
  margin: 32px 0 18px;
  font-size: 14px;
  font-weight: 500;
  color: #0c0c21;
  letter-spacing: 0.5px;
}
.pages-pay-content .pay-content .fr-con .user-info b {
  cursor: pointer;
  color: #3661e7;
  text-decoration: underline;
}
.pages-pay-content .pay-content .fr-con .classify-box {
  height: 126px;
  position: relative;
}
.pages-pay-content .pay-content .fr-con .classify-box.more:before {
  position: absolute;
  content: '';
  width: 30px;
  height: calc(100% - 16px);
  top: 8px;
  right: 0;
  background: linear-gradient(
    90deg,
    hsla(0, 0%, 100%, 0),
    hsla(0, 0%, 100%, 0.8)
  );
  z-index: 2;
}
.pages-pay-content .pay-content .fr-con .classify-li {
  margin: 8px 0;
  width: calc(100% - 32px);
  height: 110px;
  border: 1px solid #e5e3e1;
  border-radius: 12px;
  text-align: center;
  position: relative;
  cursor: pointer;
}
.pages-pay-content .pay-content .fr-con .center .classify-li {
  margin: 8px auto;
}
.pages-pay-content .pay-content .fr-con .classify-li.on,
.pages-pay-content .pay-content .fr-con .classify-li:hover {
  background: #f9faff;
  border-color: #3661e7;
}
.pages-pay-content .pay-content .fr-con .classify-li.on {
  border-width: 2px;
}
.pages-pay-content .pay-content .classify-li.on .recom-tag {
  top: -9px;
  right: -2px;
}
.pages-pay-content .pay-content .classify-li .recom-tag {
  position: absolute;
  right: -1px;
  top: -8px;
  padding: 0 10px;
  height: 24px;
  background-image: linear-gradient(90deg, #f5c031, #ffd800);
  border-radius: 6px;
  text-align: center;
  line-height: 24px;
  font-size: 12px;
  color: #161616;
  white-space: nowrap;
}
.pages-pay-content .pay-content .classify-li.on .expire {
  padding-top: 27px;
}
.pages-pay-content .pay-content .classify-li .expire {
  padding: 28px 0 15px;
  font-size: 16px;
  color: #0c0c21;
}
.pages-pay-content .pay-content .classify-li .price {
  font-size: 14px;
  color: #0c0c21;
  white-space: nowrap;
  overflow: hidden;
}
.pages-pay-content .pay-content .classify-li .price.pl {
  padding-left: 42px;
}
.pages-pay-content .pay-content .classify-li .price b {
  margin: 0 5px;
  font-size: 22px;
  color: #d92f63;
  vertical-align: text-bottom;
  letter-spacing: 0.5px;
}
.pages-pay-content .pay-content .classify-li .price .average {
  font-size: 12px;
  color: #9e9ea6;
}
.pages-pay-content .pay-content .amount-select {
  margin-top: 20px;
  height: 30px;
  display: flex;
  justify-content: start;
  line-height: 30px;
  font-size: 14px;
  color: #808081;
}
.pages-pay-content .pay-content .amount-select b {
  margin: 0 5px;
  color: #0c0c21;
}
.pages-pay-content .pay-content .amount-select .btn {
  margin: 0 5px;
  display: inline-block;
  width: 28px;
  height: 100%;
  border-radius: 4px;
  text-align: center;
  line-height: 26px;
  background-color: #fff;
  border: 1px solid #e5e3e1;
  color: #9f9fa0;
  font-size: 20px;
}
.pages-pay-content .pay-content .amount-select .btn:hover {
  background-color: #f4f7ff;
  border-color: #3661e7;
  color: #3060f8;
}
.pages-pay-content .pay-content .amount-con {
  margin: -1px 10px;
  width: 88px;
  height: 100%;
  position: relative;
}
.pages-pay-content .pay-content .amount-con input {
  width: 88px;
  height: 100%;
  border-radius: 4px;
  border: 1px solid #e5e3e1;
  background-color: #fff;
  text-align: center;
  text-indent: 0;
  font-size: 14px;
  color: #0c0c21;
}
.pages-pay-content .pay-content .amount-con .tip-pop {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 5px;
  line-height: 22px;
  border: 1px solid #e882a1;
  border-radius: 4px;
  background-color: #fff;
  font-size: 12px;
  color: #d92f63;
  white-space: nowrap;
}
.pages-pay-content .pay-content .amount-con .tip-pop:before {
  position: absolute;
  content: '';
  bottom: -4px;
  margin-left: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  background-color: #fff;
  border-radius: 0 0 3px 0;
  border-color: transparent #e882a1 #e882a1 transparent;
  border-style: solid;
  border-width: 1px;
  transform: rotate(45deg);
}
.pages-pay-content .pay-content .fr-con .pay-box {
  text-align: center;
  transition: 0.3s;
}
.pages-pay-content .pay-content .hidden {
  opacity: 0;
  pointer-events: none;
}
.pages-pay-content .pay-content .fr-con .pay-money {
  margin-top: 22px;
  text-align: center;
  font-size: 14px;
  color: #0c0c21;
}
.pages-pay-content .pay-content .fr-con .pay-money > span {
  position: relative;
}
.pages-pay-content .pay-content .fr-con .pay-money > span .pay-money-desc {
  color: #4b4b4c;
  text-align: end;
  font-size: 12px;
  position: absolute;
  right: 65px;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
}
.pages-pay-content .pay-content .fr-con .pay-money > span .pay-money-desc-info {
  position: relative;
  vertical-align: text-bottom;
}
.pages-pay-content
  .pay-content
  .fr-con
  .pay-money
  > span
  .pay-money-desc-info
  > i {
  color: #185bf8;
  cursor: pointer;
}
.pages-pay-content
  .pay-content
  .fr-con
  .pay-money
  > span
  .pay-money-desc-info
  > div {
  display: none;
  text-align: left;
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  border-radius: 4px;
  padding: 8px 10px;
  box-shadow: 0 0 6px 0 #9a9898;
}
.pages-pay-content
  .pay-content
  .fr-con
  .pay-money
  > span
  .pay-money-desc-info
  > div
  > p {
  margin: 4px 0;
}
.pages-pay-content
  .pay-content
  .fr-con
  .pay-money
  > span
  .pay-money-desc-info:hover
  > div {
  display: block;
}
.pages-pay-content .pay-content .fr-con .pay-money b {
  font-size: 28px;
  color: #d92f63;
  vertical-align: text-bottom;
}
.pages-pay-content .pay-content .fr-con .pay-money s {
  font-size: 14px;
  color: #808081;
  margin-left: 5px;
}
.pages-pay-content .pay-content .pay-box .payment {
  margin: 26px 0;
  display: flex;
  justify-content: start;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  color: #9e9ea6;
}
.pages-pay-content .pay-content .fr-con .pb-li {
  display: inline-block;
  vertical-align: middle;
  width: 166px;
  height: 210px;
  position: relative;
}
.pages-pay-content .pay-content .fr-con .pb-li:last-of-type {
  margin-left: 13%;
  cursor: pointer;
}
.pages-pay-content .pay-content .fr-con .pb-li .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 166px;
  background-color: rgba(0, 0, 0, 0.78);
  text-align: center;
  line-height: 166px;
  font-size: 14px;
  color: #f7f3f0;
  text-decoration: underline;
}
.pages-pay-content .pay-content .fr-con .weixin {
  width: 100%;
  height: 166px;
  border: 1px solid #53a949;
}
.pages-pay-content .pay-content .fr-con .weixin img {
  width: 100%;
}
.pages-pay-content .pay-content .fr-con .weixin-desc {
  margin-top: 12px;
  text-align: center;
  font-size: 18px;
  color: #3e3e3e;
}
.pages-pay-content .pay-content .fr-con .weixin-desc i {
  margin-right: 6px;
  vertical-align: middle;
  font-size: 28px;
  color: #50b326;
}
.pages-pay-content .pay-content .fr-con .alipay {
  width: 100%;
  height: 166px;
  border: 1px solid #4b88e8;
  text-align: center;
  padding: 28px 36px;
}
.pages-pay-content .pay-content .fr-con .alipay img {
  width: 100%;
}
.pages-pay-content .pay-content .fr-con .alipay-desc {
  margin-top: 8px;
  width: 100%;
  height: 36px;
  background: #4b88e8;
  text-align: center;
  line-height: 36px;
  font-size: 16px;
  color: #fff;
}
.pages-pay-content .pay-content .agreement {
  margin: 34px 0 12px;
  font-size: 14px;
  color: #9e9ea6;
  cursor: pointer;
  position: relative;
}
.pages-pay-content .pay-content .agreement i {
  color: #e5e3e1;
  margin-right: 8px;
}
.pages-pay-content .pay-content .agreement a {
  color: #808081;
}
.pages-pay-content .pay-content .agreement:hover .pop {
  display: block;
}
.pages-pay-content .pay-content .agreement .pop {
  display: none;
  position: absolute;
  top: -40px;
  left: -15px;
  padding: 0 12px;
  background-color: #fff;
  border: 1px solid #f7f3f0;
  border-radius: 4px;
  line-height: 32px;
  white-space: nowrap;
  font-size: 12px;
  color: #aa9e95;
}
.pages-pay-content .pay-content .agreement .pop:before {
  position: absolute;
  content: '';
  bottom: -5px;
  left: 18px;
  width: 8px;
  height: 8px;
  background-color: #fff;
  transform: rotate(45deg);
  border-right: 1px solid #eef0f2;
  border-bottom: 1px solid #eef0f2;
  border-radius: 0 0 4px 0;
}
.pages-pay-content .pay-content .warning {
  font-size: 14px;
  color: #9f9fa0;
}
.pages-pay-content .pay-content .warning a {
  color: #3060f8;
  text-decoration: underline;
}
@media screen and (max-width: 1200px) {
  .pages-pay-content .pay-content .fl-bg {
    width: 0;
  }
}
@media screen and (max-height: 800px) {
  .pages-pay-content .pay-content .fl-bg .pic1 {
    width: 80%;
  }
  .pages-pay-content .pay-content .fl-bg .pic2 {
    width: 60%;
  }
  .pages-pay-content .pay-content .fr-con {
    min-height: 600px;
    overflow: auto;
  }
  .pages-pay-content .pay-content .fr-con .pay-tit {
    height: 34px;
  }
  .pages-pay-content .pay-content .fr-con .main-title {
    margin: 15px 0 30px;
    font-size: 34px;
  }
  .pages-pay-content .pay-content .fr-con .auth-type {
    height: 28px;
  }
  .pages-pay-content .pay-content .fr-con .user-info {
    margin: 18px 0 8px;
    letter-spacing: 0;
  }
  .pages-pay-content .pay-content .fr-con .auth-li {
    width: 98px;
    height: 28px;
    line-height: 26px;
    font-size: 14px;
  }
  .pages-pay-content .pay-content .fr-con .auth-li img {
    height: 14px;
  }
  .pages-pay-content .pay-content .fr-con .classify-box {
    height: 108px;
  }
  .pages-pay-content .pay-content .fr-con .classify-li {
    height: 90px;
  }
  .pages-pay-content .pay-content .classify-li .expire {
    padding: 18px 0 8px;
  }
  .pages-pay-content .pay-content .classify-li .price b {
    font-size: 26px;
  }
  .pages-pay-content .pay-content .fr-con .pay-money {
    margin-top: 22px;
  }
  .pages-pay-content .pay-content .fr-con .pay-money b {
    font-size: 30px;
  }
  .pages-pay-content .pay-content .pay-box .payment {
    margin: 25px 0;
  }
  .pages-pay-content .pay-content .amount-select {
    height: 24px;
    line-height: 24px;
  }
  .pages-pay-content .pay-content .amount-select .btn {
    line-height: 22px;
  }
  .pages-pay-content .pay-content .amount-con .tip-pop {
    top: -22px;
    line-height: 18px;
  }
  .pages-pay-content .pay-content .fr-con .pb-li {
    width: 108px;
    height: 146px;
  }
  .pages-pay-content .pay-content .fr-con .pb-li .mask {
    height: 108px;
    line-height: 108px;
  }
  .pages-pay-content .pay-content .fr-con .weixin {
    height: 108px;
  }
  .pages-pay-content .pay-content .fr-con .weixin-desc,
  .pages-pay-content .pay-content .fr-con .weixin-desc i {
    font-size: 14px;
  }
  .pages-pay-content .pay-content .fr-con .alipay {
    height: 108px;
    padding: 10px 23px;
  }
  .pages-pay-content .pay-content .fr-con .alipay-desc {
    height: 28px;
    line-height: 28px;
    font-size: 14px;
  }
  .pages-pay-content .pay-content .agreement {
    margin: 24px 0 6px;
    font-size: 12px;
  }
  .pages-pay-content .pay-content .warning {
    font-size: 12px;
    line-height: 14px;
  }
}
@media screen and (max-height: 630px) {
  .pages-pay-content .pay-content .fl-bg .pic1 {
    width: 70%;
  }
  .pages-pay-content .pay-content .fl-bg .pic2 {
    width: 50%;
  }
  .pages-pay-content .pay-content .fr-con {
    min-height: 100%;
    align-items: unset;
  }
}
@media screen and (max-width: 600px) {
  .pages-pay-content .pay-content .fr-con .pay-tit {
    height: 28px;
  }
  .pages-pay-content .pay-content .fr-con .main-title {
    font-size: 28px;
  }
}
.laxin-div .laxin-got {
  width: 750px;
  height: 100%;
  min-height: 1334px;
  background: #0b1edc
    url(https://pic.51ifonts.com/images/activity/laxin-m/new-bg2.jpg) no-repeat
    top;
  background-size: 100% auto;
  text-align: center;
}
.laxin-div .laxin-got .banner {
  height: 218px;
}
.laxin-div .laxin-got .success {
  background: url(https://pic.51ifonts.com/images/activity/laxin-m/fireworks.png)
    no-repeat top;
  background-size: auto 207px;
}
.laxin-div .laxin-got .title {
  padding: 90px 0 32px;
  text-align: center;
  font-size: 56px;
  color: #fff;
}
.laxin-div .laxin-got .desc {
  font-size: 40px;
  color: #fff;
}
.laxin-div .laxin-got .info {
  padding-top: 163px;
  font-size: 32px;
  color: #1845f7;
  font-weight: 600;
}
.laxin-div .laxin-got .info .iconfont {
  font-size: 24px;
  vertical-align: 2px;
  margin: 0 10px;
}
.laxin-div .laxin-got .step {
  margin-top: 90px;
  padding-left: 122px;
  text-align: left;
  font-size: 28px;
  color: #1845f7;
  font-weight: 600;
  margin-bottom: 24px;
}
.laxin-div .laxin-got .step .seq {
  vertical-align: -6px;
  font-size: 48px;
  margin-right: 8px;
}
.laxin-div .share-box {
  margin: 0 auto;
  width: 592px;
  height: 96px;
  border-radius: 48px;
  overflow: hidden;
  display: flex;
}
.laxin-div .share-box input {
  width: 378px;
  height: 100%;
  background: #f1f3ff;
  border: none;
  padding-left: 14px;
  font-size: 32px;
  color: #2341ff;
}
.laxin-div .share-box .btn-copy {
  width: 214px;
  height: 100%;
  background: #1845f7;
  border-radius: 0 48px 48px 0;
  text-align: center;
  line-height: 96px;
  font-size: 28px;
  color: #fff;
}
.laxin-div .btn-download {
  display: block;
  margin: 0 auto;
  width: 592px;
  height: 96px;
  border-radius: 48px;
  background: #f1f3ff;
  text-align: center;
  line-height: 96px;
  font-size: 32px;
  color: #1c3bff;
}
.laxin-div .btn-download .iconfont {
  margin-right: 13px;
  font-size: 32px;
}
.laxin-div .warning {
  margin-top: 98px;
  font-size: 24px;
  color: #1f3eff;
  text-align: center;
  font-weight: 600;
}
.laxin-div .warning .iconfont {
  margin: 0 6px;
  font-size: 24px;
  color: #2fc062;
  font-weight: 400;
}
.laxin-div .btn-know {
  width: 600px;
  height: 96px;
  border: 2px solid #1845f7;
  border-radius: 48px;
  line-height: 92px;
  font-size: 32px;
  color: #1845f7;
}
.copy-pop,
.laxin-div .btn-know {
  background: #fff;
  text-align: center;
}
.copy-pop {
  width: 590px;
  height: 380px;
  border-radius: 24px;
}
.copy-pop .title {
  padding: 40px 0;
  font-size: 36px;
  color: #333;
}
.copy-pop .title .icon-duihao {
  font-size: 44px;
  color: #31d1b1;
}
.copy-pop .info {
  font-size: 28px;
  color: #333;
  margin-bottom: 24px;
}
.copy-pop .btn-know {
  width: 360px;
  height: 80px;
  border-radius: 40px;
  background: #1845f7;
  text-align: center;
  line-height: 80px;
  font-size: 28px;
  color: #fff;
}
abbr,
address,
article,
aside,
audio,
b,
blockquote,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
summary,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
article,
aside,
dialog,
figure,
footer,
header,
main,
menu,
nav,
section {
  display: block;
}
em,
h1,
h2,
h3,
h4,
h5,
h6,
i {
  font-style: normal;
  line-height: 1em;
}
li,
ol,
ul {
  list-style-type: none;
}
a {
  color: #666;
  outline: 0;
}
a,
a:hover {
  text-decoration: none;
}
em,
i {
  font-style: normal;
}
img {
  border: 0;
  vertical-align: middle;
}
button {
  cursor: pointer;
  outline: none;
  padding: 0;
  margin: 0;
  background-color: transparent;
  border: none;
}
input {
  padding-top: 0;
  padding-bottom: 0;
  font-family: Arial;
}
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input::placeholder {
  color: #999;
}
input:-moz-placeholder {
  color: #999;
}
input:-ms-input-placeholder {
  color: #999;
}
input::-webkit-input-placeholder {
  color: #999;
}
input,
select {
  vertical-align: middle;
}
input,
select,
textarea {
  font-size: 16px;
  margin: 0;
}
input[type='password'],
input[type='text'],
textarea {
  outline-style: none;
  -webkit-appearance: none;
}
textarea {
  resize: none;
}
table {
  border-collapse: collapse;
}
* {
  box-sizing: border-box;
  -ms-box-sizing: border-box;
}
.client-body {
  font-family: PingFang SC, Helvetica, Microsoft YaHei, STHeiti, Tahoma;
  font-size: 14px !important;
  color: #333;
  letter-spacing: 0;
  background: #fff;
  padding-top: 0;
  line-height: 1 !important;
}
.mobile-body {
  padding-top: 0;
  min-width: 750px;
}
.clearfix:after {
  content: '.';
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.hide {
  display: none;
}
.custom-pop {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 0;
}
.custom-pop * {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.custom-pop .closeX {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  cursor: pointer;
  transition: 0.3s;
}
.custom-pop .closeX:hover {
  transform: rotate(180deg);
}
.custom-pop .closeX i {
  color: #666;
  font-weight: 700;
  font-size: 18px;
}
.icon-jiazai {
  display: block;
  margin: 150px auto 0;
  text-align: center;
  width: 30px;
  height: 30px;
  font-size: 30px;
  color: #0057ff;
  animation: rotate 1.4s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
.drag {
  -webkit-app-region: drag;
}
.drag .btn,
.drag .checkbox,
.drag .no-drag,
.drag a,
.drag button,
.drag i.link,
.drag input {
  -webkit-app-region: no-drag;
}
.slick-slider {
  height: 100%;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list,
.slick-slider {
  position: relative;
  display: block;
}
.slick-list {
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.slick-slider .slick-list,
.slick-slider .slick-track {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:after,
.slick-track:before {
  display: table;
  content: '';
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}
.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}
[dir='rtl'] .slick-slide {
  float: right;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
  display: none;
}
.btn-next,
.btn-prev {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 1px solid #232323;
  background: linear-gradient(0deg, #f5f6f9, #fff);
  border-radius: 50%;
  text-align: center;
  line-height: 34px;
  font-size: 20px;
  color: #000;
  -webkit-app-region: no-drag;
  transition: 0.3s;
}
.btn-next.disable,
.btn-prev.disable {
  opacity: 0;
  pointer-events: none;
}
.btn-next.hover-show,
.btn-prev.hover-show {
  opacity: 0;
  transition: 0.28s;
}
.slick-slider:hover .btn-next.hover-show,
.slick-slider:hover .btn-prev.hover-show {
  opacity: 1;
}
.btn-next.sm,
.btn-prev.sm {
  width: 24px;
  height: 24px;
  line-height: 13px;
  border: none;
  background: #f3f3f3;
  color: #666;
}
.btn-prev.sm {
  transform: translate(-120%, -50%);
}
.btn-next.sm {
  transform: translate(80%, -50%);
}
.btn-next.sm.ml {
  transform: translate(40%, -50%);
}
.btn-next:hover,
.btn-prev:hover {
  border-color: #466eda;
  background: linear-gradient(0deg, #0a48f0, #2f80f5);
  color: #fff;
}
.btn-prev {
  left: 0;
  transform: translate(-50%, -50%);
}
.btn-prev.lg-inner {
  transform: translateY(-50%);
}
.btn-next {
  right: 0;
  transform: translate(50%, -50%);
}
.btn-next.lg-inner {
  transform: translateY(-50%);
}
.btn-next i,
.btn-prev i {
  font-size: 20px;
}
.btn-next.sm i,
.btn-prev.sm i {
  font-size: 14px;
}
.MuiSlider-valueLabel {
  top: -16px;
  z-index: 1;
  position: absolute;
  font-size: 0.75rem;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01071em;
  transform-origin: bottom center;
}
.box-hover {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.box-hover:hover:before {
  width: 200%;
  opacity: 1;
}
.box-hover:hover {
  color: #fff !important;
}
.box-hover:before {
  opacity: 0;
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 0 30px 0 0;
  width: 0;
  height: 100%;
  background: #315dff !important;
  background: -webkit-linear-gradient(
    150deg,
    #315dff,
    #12d4ff 50%,
    #315dff
  ) !important;
  background: linear-gradient(60deg, #315dff, #12d4ff 50%, #315dff) !important;
  background-size: 200% 100% !important;
  background-position: 0 50%;
  animation: slide 1.5s linear infinite alternate-reverse forwards;
  transition: 0.3s linear;
}
.pages-team-require-pay-content .pay-content {
  padding: 50px 0;
  background-color: #eef0f5;
}
.pages-team-require-pay-content .top {
  width: 100%;
  height: 80px;
  background-color: #f9fafb;
  position: relative;
  margin-bottom: 38px;
}
.pages-team-require-pay-content .top .logo {
  position: absolute;
  top: 25px;
  left: 55px;
  width: 104px;
}
.pages-team-require-pay-content .top .logo img {
  width: 100%;
}
.pages-team-require-pay-content .top .title {
  line-height: 80px;
  font-size: 20px;
  color: #4c72ec;
  text-align: center;
}
.pages-team-require-pay-content .main-content {
  margin: 0 auto;
  width: 1000px;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  padding-bottom: 43px;
}
.pages-team-require-pay-content .warning-info {
  padding: 0 50px;
  font-size: 14px;
  color: #d65244;
}
.pages-team-require-pay-content .warning-info span {
  margin-left: 10px;
  color: #4c72ec;
  text-decoration: underline;
  cursor: pointer;
}
.pages-team-require-pay-content .order {
  padding: 0 50px;
  margin-top: 38px;
  line-height: 30px;
  font-size: 16px;
  color: #121c3b;
}
.pages-team-require-pay-content .order .reset-order {
  width: 90px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid #4c72ec;
  text-align: center;
  line-height: 28px;
  font-size: 14px;
  color: #4c72ec;
}
.pages-team-require-pay-content .order-con {
  margin: 22px auto 0;
  width: calc(100% - 100px);
  border-radius: 4px;
  border: 1px solid #d4d7de;
}
.pages-team-require-pay-content .order-con .thead {
  background: #f9fafb;
  line-height: 56px;
  display: flex;
}
.pages-team-require-pay-content .order-con .td {
  width: 25%;
  text-align: center;
  font-size: 14px;
  color: #a1a8b2;
}
.pages-team-require-pay-content .order-con .tbody {
  line-height: 60px;
  font-size: 14px;
  color: #121c3b;
  border-bottom: 1px solid #d4d7de;
  display: flex;
}
.pages-team-require-pay-content .order-con .tbody .td {
  color: #121c3b;
  font-weight: 600;
}
.pages-team-require-pay-content .order-bottom {
  padding: 35px 50px 38px;
  text-align: right;
  font-size: 14px;
  color: #a1a8b2;
}
.pages-team-require-pay-content .order-bottom .price {
  font-weight: 600;
  margin-bottom: 18px;
}
.pages-team-require-pay-content .order-bottom b {
  margin-left: 10px;
  font-size: 30px;
  color: #d65244;
}
.pages-team-require-pay-content .transfer-info {
  margin: 14px auto 0;
  width: calc(100% - 100px);
  border-radius: 4px;
  border: 1px solid #d4d7de;
  padding: 53px 50px 40px;
  position: relative;
}
.pages-team-require-pay-content .transfer-info .info {
  font-size: 14px;
  color: #121c3b;
  margin-bottom: 32px;
}
.pages-team-require-pay-content .transfer-info .info:last-of-type {
  margin-bottom: 0;
}
.pages-team-require-pay-content .transfer-info .l-name {
  float: left;
  width: 80px;
  text-align: right;
  font-size: 14px;
  color: #a1a8b2;
  white-space: nowrap;
}
.pages-team-require-pay-content .transfer-info .info .explain {
  color: #d65244;
  margin-left: 10px;
}
.pages-team-require-pay-content .transfer-info .btn-copy {
  position: absolute;
  bottom: 40px;
  right: 50px;
  font-size: 14px;
  color: #4d73ec;
  text-decoration: underline;
  cursor: pointer;
}
.pages-team-require-pay-content .btn-upload {
  width: 244px;
  height: 46px;
  border-radius: 6px;
  background-color: #4d73ec;
  text-align: center;
  line-height: 46px;
  font-size: 14px;
  color: #fff;
}
.order-pop {
  width: 392px;
  padding: 40px 34px 34px;
  text-align: center;
  position: relative;
}
.order-pop .btn-close {
  position: absolute;
  top: 18px;
  right: 18px;
  cursor: pointer;
  transition: 0.3s;
}
.order-pop .btn-close:hover {
  transform: rotate(180deg);
}
.order-pop .btn-close i {
  font-size: 14px;
  color: #000;
}
.order-pop .title {
  font-size: 18px;
  color: #121c3b;
  font-weight: 600;
  margin-bottom: 32px;
}
.order-pop .desc {
  margin-bottom: 14px;
  font-size: 14px;
  color: #535d71;
}
.order-pop .btn {
  width: 244px;
  height: 46px;
  background: #4d73ec;
  border-radius: 6px;
  text-align: center;
  line-height: 46px;
  font-size: 14px;
  color: #fff;
  position: relative;
}
.order-pop .btn .file-upload {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.order-pop .state {
  margin-top: 30px;
  text-align: left;
  line-height: 23px;
  font-size: 12px;
  color: #b1bbc7;
}
.single-auth-manage .mm-con {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 42px;
  padding-bottom: 50px;
}
.single-auth-manage .subtitle {
  line-height: 80px;
  border-bottom: 1px solid #f5f7f9;
  padding-left: 56px;
  font-size: 16px;
  color: #1e2938;
}
.single-auth-manage .auth-table {
  margin: 35px auto 0;
  width: 1128px;
}
.single-auth-manage .auth-table td {
  text-align: center;
  vertical-align: middle;
}
.single-auth-manage .auth-table td:last-of-type {
  width: 262px;
}
.single-auth-manage .auth-table thead td {
  height: 50px;
  background-color: #202937;
  font-size: 14px;
  color: #fff;
}
.single-auth-manage .auth-table tbody td {
  padding: 30px 0;
  font-size: 14px;
  color: #1e2938;
  border: 1px solid #ecf1f5;
  border-top: none;
}
.single-auth-manage .auth-table tbody td:first-of-type {
  font-size: 24px;
  color: #1e2938;
}
.single-auth-manage .auth-table .down-certificate {
  width: 163px;
  height: 32px;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  border-radius: 4px;
  text-align: center;
  line-height: 32px;
  font-size: 12px;
  color: #fff;
}
.single-auth-manage .auth-table .down-agreement {
  width: 163px;
  height: 32px;
  background: #ecf1f5;
  border-radius: 4px;
  text-align: center;
  line-height: 32px;
  font-size: 12px;
  color: #202937;
}
.ifonts-certificate {
  width: 1063px;
  height: 767px;
  background: url(https://51ifonts.com/images/certificate/ifonts.jpg) no-repeat
    top;
  background-size: 100% auto;
  padding-top: 282px;
  text-align: center;
}
.ifonts-certificate .font-name {
  display: inline-block;
  border-radius: 8px 8px 0 0;
  background-color: #101429;
  min-width: 390px;
  height: 101px;
  padding: 0 40px;
  border-bottom: 6px solid #f5c12e;
  line-height: 95px;
  font-size: 58px;
  color: #fff;
}
.ifonts-certificate .font-name div {
  position: relative;
}
.ifonts-certificate .auth-info {
  margin: 56px auto 65px;
  padding: 0 140px;
  list-style: none;
}
.ifonts-certificate .auth-info.clearfix:after {
  content: '.';
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
}
.ifonts-certificate .auth-info .ai-li {
  float: left;
  width: 68%;
  text-align: left;
  font-size: 20px;
  color: #101429;
  margin-bottom: 35px;
}
.ifonts-certificate .auth-info .ai-li:nth-of-type(2n) {
  width: 32%;
}
.ifonts-certificate .auth-objs {
  margin-top: 30px;
  padding-left: 140px;
  text-align: left;
  font-size: 16px;
  color: #101429;
}
.ifonts-certificate .auth-objs .l-name {
  float: left;
  text-align: right;
  width: 84px;
}
.ifonts-certificate .auth-date {
  float: right;
  margin-right: 140px;
  width: 250px;
}
.ifonts-certificate .auth-chapter {
  position: relative;
}
.ifonts-certificate .auth-chapter:before {
  position: absolute;
  content: '';
  bottom: -34px;
  right: -31px;
  width: 154px;
  height: 154px;
  background: url(https://51ifonts.com/images/common/seal.png) no-repeat;
  background-size: 100% auto;
}
.creator-certificate {
  width: 540px;
  height: 690px;
  background: url(https://51ifonts.com/images/certificate/creator.jpg) no-repeat
    top;
  background-size: 100% auto;
  padding-top: 162px;
  text-align: center;
}
.creator-certificate .auth-info {
  margin-bottom: 19px;
  text-align: left;
  padding-left: 72px;
  font-size: 14px;
  color: #11182e;
}
.creator-certificate .auth-info + .auth-objs {
  margin-top: 68px;
}
.creator-certificate .l-name {
  float: left;
  width: 84px;
  color: #535d71;
}
.creator-certificate .font-name {
  margin: 15px 0 52px;
  display: inline-block;
  border-radius: 6px;
  min-width: 328px;
  max-width: 90%;
  height: 68px;
  border: 1px solid #8193d0;
  background-color: #fff;
}
.creator-certificate .font-name .inner {
  margin: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: 1px dotted #8193d0;
  border-radius: 4px;
  padding: 0 40px;
  line-height: 60px;
  font-size: 44px;
  color: #000;
  white-space: nowrap;
}
.creator-certificate .font-name div {
  position: relative;
}
.creator-certificate .auth-objs {
  margin-bottom: 22px;
  text-align: left;
  padding-left: 72px;
  font-size: 14px;
  color: #11182e;
}
.creator-certificate .auth-date {
  margin-top: 60px;
}
.creator-certificate .platform {
  float: right;
  padding-right: 154px;
  position: relative;
}
.creator-certificate .platform:before {
  position: absolute;
  content: '';
  bottom: -22px;
  left: 63px;
  width: 117px;
  height: 117px;
  background: url(https://51ifonts.com/images/certificate/stamp.jpg) no-repeat;
  background-size: 100% auto;
}
._com-user-cancel-continue-dialog {
  position: relative;
  padding: 25px 20px 22px;
}
._com-user-cancel-continue-dialog a.btn-close {
  position: absolute;
  top: 18px;
  right: 18px;
  cursor: pointer;
  transition: 0.3s;
}
._com-user-cancel-continue-dialog a.btn-close i {
  color: #000;
}
._com-user-cancel-continue-dialog a.btn-close:hover {
  transform: rotate(180deg);
}
._com-user-cancel-continue-dialog h4 {
  text-align: center;
  font-size: 16px;
  color: #202937;
  margin-bottom: 38px;
}
._com-user-cancel-continue-dialog p {
  padding: 12px 19px;
  text-align: right;
  border-bottom: 1px dashed #dee2e7;
}
._com-user-cancel-continue-dialog p > span {
  display: inline-block;
}
._com-user-cancel-continue-dialog p > span:first-of-type {
  width: 40%;
  color: #535d71;
}
._com-user-cancel-continue-dialog p > span:last-of-type {
  width: 60%;
  padding-right: 19px;
  color: #11182e;
}
._com-user-cancel-continue-dialog p > span:last-of-type s {
  color: #8493a7;
}
._com-user-cancel-continue-dialog div {
  margin-top: 48px;
}
._com-user-cancel-continue-dialog div > span {
  font-size: 12px;
  color: #202937;
  margin-right: 75px;
}
._com-user-cancel-continue-dialog .argument {
  display: block;
  text-align: center;
  color: #8493a7;
  font-size: 12px;
  margin-top: 23px;
}
._com-user-cancel-continue-dialog--is-cancel {
  position: relative;
  width: 382px;
  padding: 25px 0 24px;
  text-align: center;
}
._com-user-cancel-continue-dialog--is-cancel a.btn-close {
  position: absolute;
  top: 18px;
  right: 18px;
  cursor: pointer;
  transition: 0.3s;
}
._com-user-cancel-continue-dialog--is-cancel a.btn-close i {
  color: #000;
}
._com-user-cancel-continue-dialog--is-cancel a.btn-close:hover {
  transform: rotate(180deg);
}
._com-user-cancel-continue-dialog--is-cancel .title {
  font-size: 16px;
  color: #202937;
  letter-spacing: 1px;
  font-weight: 600;
}
._com-user-cancel-continue-dialog--is-cancel .desc {
  font-size: 14px;
  color: #11182e;
  margin: 24px 0 33px;
}
._com-user-cancel-continue-dialog--is-cancel .btn-group {
  margin-top: 62px;
  display: flex;
  justify-content: center;
}
._com-user-cancel-continue-dialog--is-cancel .btn-reset {
  width: 122px;
  height: 38px;
  background: #dbdfe4;
  border-radius: 4px;
  line-height: 38px;
  font-size: 12px;
  color: #11182e;
}
._com-user-cancel-continue-dialog--is-cancel .btn-submit {
  width: 122px;
  height: 38px;
  background: linear-gradient(270deg, #3a7fff, #275af0);
  border-radius: 4px;
  line-height: 38px;
  font-size: 12px;
  color: #fff;
}
.usage-license {
  width: 1190px;
  padding: 0;
  overflow: hidden;
  margin: -70px 0 0;
}
.usage-license .a4 {
  margin: 0 auto;
  width: 1190px;
  height: 1683px;
  background: url(https://pic.51ifonts.com/images/agreement/license-bg-a4.jpg)
    no-repeat top;
  background-size: 100% auto;
  padding: 180px 100px 80px;
  position: relative;
}
.usage-license .a4:first-child {
  margin-top: 0;
}
.usage-license .a4:last-child {
  margin-bottom: 0;
}
.usage-license .a4-head {
  border-bottom: 2px solid #dbdbdb;
  height: 50px;
  overflow: hidden;
}
.usage-license .a4-head .iconfont {
  float: left;
  margin-top: -3px;
  font-size: 60px;
}
.usage-license .a4-head .slogo {
  display: block;
  text-align: right;
  font-size: 18px;
  line-height: 52px;
}
.usage-license .logo {
  position: absolute;
  width: 170px;
  left: 95px;
  top: 82px;
}
.usage-license .top-right {
  position: absolute;
  top: 74px;
  right: 84px;
  text-align: left;
}
.usage-license .top-right p {
  font-size: 16px;
  color: #757575;
  line-height: 26px;
}
.usage-license .serial-number {
  font-size: 14px;
  color: #929292;
  text-indent: 0;
}
.usage-license h1 {
  font-size: 48px;
  color: #000;
  text-align: center;
  padding: 0 0 20px;
}
.usage-license .mt {
  padding: 30px 0;
}
.usage-license .auth-objs {
  border: 1px solid #cbcaca;
  padding: 0 36px;
}
.usage-license .ao-li {
  float: left;
  width: 50%;
  height: 90px;
  border-bottom: 1px dashed #949494;
  padding: 18px 0;
}
.usage-license .clear-border {
  border: none;
}
.usage-license .ao-li .al-tit {
  font-size: 16px;
  color: #757575;
}
.usage-license .ao-li .al-con {
  margin-top: 4px;
  font-size: 18px;
  color: #000;
}
.usage-license .agreement-text-indent {
  text-indent: 2em;
}
.usage-license .agreement-text-indent-double {
  text-indent: 4em;
}
.usage-license .agreement-text-red {
  color: red;
}
.usage-license .right {
  position: absolute;
  right: 322px;
  top: 226px;
}
.usage-license .desc {
  text-indent: 0;
}
.usage-license h2 {
  font-size: 20px;
  color: #000;
  margin: 30px 0 12px;
}
.usage-license h3 {
  margin-top: 18px;
  color: #000;
  font-size: 18px;
  font-weight: 500;
  padding-bottom: 8px;
  line-height: 1;
}
.usage-license article > h2 {
  text-align: center;
}
.usage-license article.license-top {
  border: 1px solid #000;
  border-bottom: 0;
  padding: 10px 20px 0;
}
.usage-license article.license-center {
  border: 1px solid #000;
  border-top: 0;
  border-bottom: 0;
  padding: 0 20px 10px;
}
.usage-license article.license-bottom {
  border: 1px solid #000;
  border-top: 0;
  padding: 0 20px 10px;
  margin-bottom: 50px;
}
.usage-license p {
  font-size: 16px;
  color: #000;
  line-height: 30px;
}
.usage-license p.end {
  text-indent: 0;
}
.usage-license .red {
  color: red;
}
.usage-license .both-objs {
  margin-top: 100px;
  font-size: 20px;
  color: #000;
}
.usage-license .both-objs.permit {
  margin-top: 40px;
}
.usage-license .party.fl {
  position: relative;
}
.usage-license .party.newfl {
  float: left;
  position: relative;
}
.usage-license .party.fr {
  position: relative;
  margin-right: 100px;
}
.usage-license .party.fl:before {
  position: absolute;
  top: -90px;
  left: 92px;
  content: '';
  width: 175px;
  height: 175px;
  background: url(https://pic.51ifonts.com/images/common/seal.png) no-repeat;
  background-size: 100% auto;
  z-index: 0;
}
.usage-license .stamp {
  position: relative;
}
.usage-license .stamp:before {
  position: absolute;
  top: -90px;
  left: 50%;
  content: '';
  width: 175px;
  height: 175px;
  background: url(https://pic.51ifonts.com/images/common/seal.png) no-repeat;
  background-size: 100% auto;
  z-index: 0;
}
.usage-license .party p {
  text-indent: 0;
}
.usage-license .both-objs .date,
.usage-license .both-objs .obj {
  z-index: 2;
  position: inherit;
}
.usage-license .usage-table {
  width: 100%;
  font-size: 15px;
  color: #333;
  line-height: 26px;
  margin: 20px 0;
}
.usage-license .usage-table td {
  border: 1px dotted #bdbdbd;
  height: 40px;
}
.usage-license .usage-table .bold {
  font-weight: 600;
}
.usage-license .usage-table td:first-of-type {
  width: 16%;
  text-align: center;
  vertical-align: middle;
}
.usage-license .usage-table td:last-of-type {
  width: 80%;
  vertical-align: middle;
  padding: 0 16px;
}
.usage-license .usage-table thead td {
  text-align: center;
  line-height: 30px;
  font-weight: 600;
  font-size: 18px;
}
.usage-license .usage-table tbody td:first-of-type {
  color: #666;
  font-weight: 600;
}
.usage-license .usage-table tbody td:last-of-type {
  color: #666;
}
.usage-license .warning {
  margin-top: 20px;
  font-style: italic;
  text-indent: 0;
  line-height: 32px;
}
.laxin-index-m {
  width: 750px;
  height: 1334px;
  position: relative;
}
.laxin-index-m video {
  width: 100%;
  height: 100%;
}
.laxin-index-m .btn {
  display: block;
  width: 630px;
  height: 100px;
  background: #1845f7;
  text-align: center;
  line-height: 100px;
  border-radius: 50px;
  font-size: 32px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}
.laxin-index-m .btn:active {
  transform: scale(0.92) translateY(4px);
}
.laxin-introduce-m {
  width: 750px;
  height: 100%;
  min-height: 1334px;
  background: #0923e3
    url(https://pic.51ifonts.com/images/activity/laxin-m/bg1.jpg?v=2) no-repeat
    top;
  background-size: 100% auto;
  padding-top: 985px;
}
.laxin-introduce-m .btn {
  margin: 0 auto;
  display: block;
  width: 666px;
  height: 170px;
  background: url(https://pic.51ifonts.com/images/activity/laxin-m/btn.png)
    no-repeat;
  background-size: 100% 100%;
  text-align: center;
  line-height: 138px;
  font-size: 36px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 4px 8px #ff9c01;
  cursor: pointer;
  transition: 0.3s;
}
.laxin-introduce-m .btn:active {
  transform: scale(0.92) translateY(4px);
}
.laxin-introduce-m .info {
  margin: 0 auto 12px;
  width: 450px;
  text-align: left;
  font-size: 24px;
  color: #fff;
  opacity: 0.7;
}
.activity-laxin-m-pop .pop {
  width: 630px;
  background: #fff;
  border-radius: 24px;
  text-align: center;
  padding: 48px 0 38px;
}
.activity-laxin-m-pop .pop p {
  padding: 0;
  margin: 0;
  line-height: 1em;
}
.activity-laxin-m-pop .pop .title {
  margin-bottom: 16px;
  font-size: 34px;
  font-weight: 600;
  color: #333;
}
.activity-laxin-m-pop .pop .title + .info {
  margin-top: 32px;
}
.activity-laxin-m-pop .pop .info {
  font-size: 28px;
  color: #333;
  margin-bottom: 16px;
}
.activity-laxin-m-pop .pop .btn {
  width: 360px;
  height: 80px;
  border-radius: 40px;
  background: #1845f7;
  text-align: center;
  line-height: 80px;
  font-size: 28px;
  color: #fff;
}
.guide {
  width: 416px;
  height: 562px;
  text-align: center;
  margin: 0 auto;
  background-color: #fff;
  padding: 15px 0 5px;
  -webkit-app-region: drag;
  position: relative;
}
.guide .btn-close {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  -webkit-app-region: no-drag;
}
.guide .show {
  display: block;
}
.guide .title {
  padding: 24px 0 8px;
  font-size: 20px;
  font-weight: 400;
  color: #181818;
}
.guide .desc {
  font-size: 14px;
  color: #7a8596;
}
.guide .course-detail {
  margin: 16px 0 24px;
  text-align: center;
}
.guide .course-detail .course-li {
  display: inline-block;
  vertical-align: middle;
  margin-right: 12px;
  width: 76px;
  height: 26px;
  box-shadow: 0 0 7px 0 rgba(177, 187, 199, 0.69);
  border-radius: 13px;
  text-align: center;
  line-height: 26px;
  font-size: 12px;
  color: #535d71;
  cursor: pointer;
  -webkit-app-region: no-drag;
}
.guide .course-detail .course-li:last-of-type {
  margin-right: 0;
}
.guide .course-detail .course-li.on {
  background-color: #2d5eef;
  color: #fff;
}
.guide .courses {
  padding-top: 16px;
  max-height: calc(100% - 143px);
  overflow-y: auto;
  -webkit-app-region: no-drag;
}
.guide .courses::-webkit-scrollbar {
  width: 5px;
}
.guide .courses::-webkit-scrollbar-track {
  width: 5px;
  border-radius: 10px;
  background-color: transparent;
}
.guide .courses::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #dbdfe4;
}
.guide .content-box {
  margin: 0 auto 30px;
  width: 376px;
  border-radius: 10px;
  border: 1px dotted #b0bcc8;
  position: relative;
  background-color: #fff;
  padding: 30px 22px 20px;
}
.guide .content-box.step-two {
  display: none;
  padding-top: 30px;
  padding-bottom: 40px;
}
.guide .course-one .subtitle {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 15px;
  height: 32px;
  border-radius: 21px;
  background-color: #fff;
  border: 1px solid #dae2e7;
  text-align: center;
  line-height: 32px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 400;
  color: #535d71;
}
.guide .content-box .info {
  text-align: left;
  font-size: 12px;
  color: #515d73;
  margin-bottom: 10px;
}
.guide .content-box .strong {
  color: #2d5eef;
}
.guide .content-box img {
  max-width: 329px;
}
.guide .content-box .explain {
  margin-top: 22px;
  text-align: center;
  font-size: 14px;
  color: #788598;
}
.guide .content-box .btn {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
}
.guide .courses .btn {
  display: block;
  margin: 0 auto;
  width: 300px;
  height: 42px;
  background: #2d5eef;
  border-radius: 6px;
  text-align: center;
  line-height: 42px;
  font-size: 14px;
  color: #fff;
  -webkit-app-region: no-drag;
}
.guide .courses .course-one > .btn {
  margin-top: -5px;
  -webkit-app-region: no-drag;
}
.guide .courses .over {
  margin-top: 10px;
  display: inline-block;
  font-size: 14px;
  color: #788598;
  -webkit-app-region: no-drag;
  cursor: pointer;
}
.update-content {
  overflow: hidden;
  background: #fff;
  height: 600px;
  position: relative;
}
.update-content .btn-close {
  position: fixed;
  right: 10px;
  top: 10px;
  font-size: 14px;
  color: #7b8697;
  cursor: pointer;
}
.update-content .btn-close:hover {
  color: #0057ff;
}
.update-content h1 {
  padding-top: 42px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: #181818;
  letter-spacing: 1px;
}
.update-content .inner-con {
  margin-top: 25px;
  height: calc(100% - 180px);
  overflow-y: auto;
  padding: 0 40px 20px;
  position: relative;
  -webkit-app-region: no-drag;
}
.update-content .inner-con::-webkit-scrollbar {
  width: 5px;
}
.update-content .inner-con::-webkit-scrollbar-track {
  width: 5px;
  border-radius: 10px;
  background-color: transparent;
}
.update-content .inner-con::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #dbdfe4;
}
.update-content .logo-update {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  border: 1px dashed #979797;
  border-radius: 10px;
  padding: 16px 0;
}
.update-content .logo-update img {
  height: 78px;
}
.update-content .logo-update .comparison {
  margin: 5px auto;
  width: 262px;
}
.update-content .logo-update .comparison > div {
  width: 82px;
}
.update-content .logo-update .name {
  font-size: 16px;
  color: #0f1d34;
}
.update-content .logo-update .version {
  font-size: 12px;
  color: #7a8596;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.update-content .logo-update .info {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 500;
  color: #0f1d34;
}
.update-content .tab-list {
  margin: 15px auto 30px;
  text-align: center;
  height: 22px;
}
.update-content .tab-list .btn-tab {
  display: inline-block;
  margin-right: 22px;
  width: 76px;
  height: 26px;
  background: #fff;
  box-shadow: 0 0 7px 0 rgba(177, 187, 199, 0.53);
  border-radius: 14px;
  text-align: center;
  line-height: 26px;
  font-size: 12px;
  color: #535d71;
  cursor: pointer;
}
.update-content .tab-list .btn-tab:last-of-type {
  margin-right: 0;
}
.update-content .tab-list .btn-tab.on {
  background: rgba(37, 91, 248, 0.06);
  color: #2d5eef;
  box-shadow: 0 0 7px 0 #e4e6ee;
}
.update-content .tab-list .btn-tab:hover {
  color: #2d5eef;
}
.update-content .main-update .subtitle {
  margin-bottom: 12px;
  text-align: center;
  font-size: 14px;
  color: #181818;
  font-weight: 400;
}
.update-content .main-update .subtitle .bold {
  color: #f33b3b;
  font-weight: 700;
}
.update-content .main-update p {
  font-size: 12px;
  color: #7a8596;
  line-height: 17px;
  letter-spacing: 0.4px;
}
.update-content .main-update img {
  margin: 10px 0 16px;
  width: 100%;
}
.update-content .other-update .subtitle {
  line-height: 22px;
  font-size: 16px;
  color: #0f1d34;
  font-weight: 400;
}
.update-content .other-update .update-time {
  float: right;
  font-size: 14px;
  color: #a9a9a9;
}
.update-content .other-update .title {
  margin-top: 12px;
  font-size: 14px;
  color: #181818;
}
.update-content .other-update li {
  margin: 8px 0;
  color: #7a8596;
  line-height: 17px;
  font-size: 12px;
  letter-spacing: 0.4px;
  list-style: disc;
}
.update-content .bottom-btn {
  margin-top: 8px;
  width: 100%;
  padding: 0 40px;
  height: 80px;
}
.update-content .bottom-btn button {
  width: 100%;
  height: 48px;
  background: #2d5eef;
  border-radius: 6px;
  text-align: center;
  line-height: 48px;
  font-size: 16px;
  color: #fff;
}
.update-content .bottom-btn button:hover {
  background: #0057ff;
}
.update-content .bottom-btn .error {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  color: #7a8596;
}
.dark-mode .update-content {
  background: #131313;
}
.dark-mode .update-content .btn-close,
.dark-mode .update-content h1 {
  color: #fff8f6;
}
.dark-mode .update-content .logo-update .info,
.dark-mode .update-content .main-update .subtitle,
.dark-mode .update-content .other-update .subtitle {
  color: #e7e9f0;
}
.dark-mode .update-content .inner-con .title,
.dark-mode .update-content .logo-update .name,
.dark-mode .update-content .logo-update .version,
.dark-mode .update-content .main-update p,
.dark-mode .update-content .other-update li {
  color: #7b7d80;
}
.dark-mode .update-content .tab-list .btn-tab {
  background: #262626;
  box-shadow: 0 0 7px 0 rgba(116, 119, 123, 0.53);
  color: #7b7d80;
}
.dark-mode .update-content .tab-list .btn-tab.on,
.dark-mode .update-content .tab-list .btn-tab:hover {
  color: #2d5eef;
}
.dark-mode .update-content .inner-con::-webkit-scrollbar-thumb {
  background: #303030;
}
.comparison {
  width: 736px;
  height: 495px;
  text-align: center;
  margin: 0 auto;
  background-color: #fff;
  -webkit-app-region: drag;
  position: relative;
}
.comparison .btn-close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  -webkit-app-region: no-drag;
}
.comparison .btn-close i {
  font-size: 14px;
  font-weight: 700;
  color: #7b8697;
}
.comparison .go-return {
  position: absolute;
  top: 18px;
  left: 10px;
  cursor: pointer;
  -webkit-app-region: no-drag;
  font-size: 12px;
  color: #7a8596;
}
.comparison .title {
  width: 100%;
  height: 54px;
  background: #eef0f2;
  text-align: center;
  line-height: 54px;
  font-size: 18px;
  color: #0f1d34;
}
.comparison table {
  width: 100%;
}
.comparison table th {
  border-right: 1px solid #eef0f2;
  height: 80px;
  text-align: center;
  vertical-align: middle;
  font-weight: 400;
  font-size: 14px;
  color: #0f1d34;
}
.comparison table th:last-of-type {
  border-right: 0;
}
.comparison table .vip-type {
  height: 14px;
  margin-right: 5px;
}
.comparison table .go-buy {
  display: block;
  width: 122px;
  height: 30px;
  background: #2d5eef;
  border-radius: 4px;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  -webkit-app-region: no-drag;
}
.comparison table td {
  border: 1px solid #eef0f2;
  width: 26%;
  height: 60px;
  text-align: center;
  vertical-align: middle;
  font-size: 14px;
  color: #0f1d34;
}
.comparison table tr td:first-of-type {
  font-size: 14px;
  color: #535d71;
  border-left: 0;
}
.comparison table tr td:nth-of-type(2) {
  width: 20%;
}
.comparison table tr td:last-of-type {
  border-right: 0;
}
.comparison table .icon-cuowu {
  font-size: 18px;
  color: #eb533f;
}
._page-client-vip-pay2 .head div {
  justify-content: center;
}
._page-client-vip-pay2 .left div.intro > div {
  font-size: 12px;
  font-weight: 500;
  color: #8493a7;
  margin-bottom: 13px;
}
._page-client-vip-pay2 .right div.personal-slider div.price-li.on .under_desc {
  color: #b1957d;
}
._page-client-vip-pay2
  .right
  div.personal-slider
  div.price-li.on
  .under_desc.btn {
  border: 1px solid rgba(240, 186, 149, 0.64);
}
._page-client-vip-pay2 .right div.personal-slider .under_desc,
._page-client-vip-pay2 .right div.team-slider .under_desc {
  font-size: 12px;
  font-weight: 400;
  color: #8093a9;
  margin-top: 8px;
  text-align: center;
  display: inline-block;
  line-height: 21px;
}
._page-client-vip-pay2 .right div.personal-slider .under_desc.btn,
._page-client-vip-pay2 .right div.team-slider .under_desc.btn {
  padding: 0 10px;
  height: 23px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eef0f2;
}
._page-client-vip-pay2 .right div.agreement .pop:before {
  bottom: -5px;
  border-right: 1px solid #eef0f2;
  border-bottom: 1px solid #eef0f2;
}
._page-client-vip-pay2 .right div.pay-box .pay-money span {
  margin-right: 5px;
}
._page-client-vip-pay2 .pay-success-pop .btn-submit {
  width: 275px;
}
.page-client-vip-intro .introduction {
  width: 736px;
  height: 495px;
  text-align: center;
  margin: 0 auto;
  background-color: #fff;
  -webkit-app-region: drag;
  position: relative;
}
.page-client-vip-intro .introduction .btn-close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  -webkit-app-region: no-drag;
}
.page-client-vip-intro .introduction .btn-close i {
  font-size: 14px;
  font-weight: 700;
  color: #7b8697;
}
.page-client-vip-intro .introduction .fl-con {
  float: left;
  width: 194px;
  height: 100%;
  background-color: #fcfcfc;
  border-right: 1px solid #ced5dd;
  padding: 30px 12px 60px;
  position: relative;
}
.page-client-vip-intro .introduction .fr-con {
  float: right;
  width: calc(100% - 195px);
  height: 100%;
  padding: 27px 35px 22px;
  text-align: left;
}
.page-client-vip-intro .introduction .fl-con .vip-type {
  height: 27px;
}
.page-client-vip-intro .introduction .fl-con .main-title {
  margin-top: 10px;
  font-size: 18px;
  color: #11182e;
}
.page-client-vip-intro .introduction .fl-con .desc {
  margin-top: 8px;
  font-size: 12px;
  color: #535d71;
}
.page-client-vip-intro .introduction .fl-con .intro {
  margin-top: 32px;
  border-top: 1px solid #eef0f2;
  padding: 28px 8px 0;
  text-align: left;
}
.page-client-vip-intro .introduction .fl-con .intro-info {
  margin-bottom: 10px;
  font-size: 12px;
  color: #535d71;
}
.page-client-vip-intro .introduction .fl-con .intro-info i {
  margin-right: 5px;
  font-size: 12px;
  color: #08a58f;
}
.page-client-vip-intro .introduction .fl-con .more-prev {
  position: absolute;
  bottom: 60px;
  left: 50%;
  font-size: 12px;
  color: #7a8596;
  text-decoration: underline;
  transform: translateX(-50%);
  cursor: pointer;
  -webkit-app-region: no-drag;
}
.page-client-vip-intro .introduction .fr-con .user-info {
  font-size: 14px;
  color: #0f1d34;
}
.page-client-vip-intro .introduction .fr-con .user-info b {
  font-size: 16px;
  color: #11182e;
}
.page-client-vip-intro .introduction .fr-con .tab-list {
  margin: 20px 0;
  height: 30px;
}
.page-client-vip-intro .introduction .fr-con .tab-li {
  display: inline-block;
  vertical-align: middle;
  margin-right: 25px;
  width: 98px;
  height: 100%;
  border-radius: 4px;
  text-align: center;
  line-height: 28px;
  border: 1px solid #eef0f2;
  font-size: 14px;
  color: #535d71;
  cursor: pointer;
  -webkit-app-region: no-drag;
}
.page-client-vip-intro .introduction .fr-con .tab-li.on,
.page-client-vip-intro .introduction .fr-con .tab-li:hover {
  border-color: #345aef;
  background: #345aef;
  color: #fff;
}
.page-client-vip-intro .introduction .fr-con .price-list {
  width: 100%;
  height: 104px;
  text-align: center;
}
.page-client-vip-intro .introduction .fr-con .price-li {
  display: inline-block;
  vertical-align: middle;
  width: 136px;
  height: 100%;
  border-radius: 4px;
  border: 2px solid #eef0f2;
  margin-right: 26px;
  text-align: center;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  -webkit-app-region: no-drag;
}
.page-client-vip-intro .introduction .fr-con .price-li:nth-child(3n) {
  margin-right: 0;
}
.page-client-vip-intro .introduction .fr-con .price-li.on,
.page-client-vip-intro .introduction .fr-con .price-li:hover {
  border-color: #eb533f;
}
.page-client-vip-intro .introduction .price-li .price {
  padding: 15px 0 2px;
  font-size: 14px;
  color: #535d71;
  letter-spacing: 0.5px;
}
.page-client-vip-intro .introduction .team .price-li .price {
  line-height: 60px;
  padding: 0;
}
.page-client-vip-intro .introduction .price-li .price.lh70 {
  line-height: 70px;
  padding: 0;
}
.page-client-vip-intro .introduction .price-li .price b {
  font-size: 20px;
  color: #0f1d34;
  font-weight: 400;
}
.page-client-vip-intro .introduction .price-li .detail {
  font-size: 12px;
  color: #535d71;
  padding-bottom: 10px;
}
.page-client-vip-intro .introduction .price-li .expire {
  border-top: 1px dashed #eef0f2;
  line-height: 28px;
  font-size: 14px;
  color: #101d34;
}
.page-client-vip-intro .introduction .team .price-li .expire {
  line-height: 38px;
}
.page-client-vip-intro .introduction .price-li .icon-side-tick {
  display: none;
  position: absolute;
  bottom: -1px;
  right: -1px;
  font-size: 20px;
  color: #eb533f;
}
.page-client-vip-intro .introduction .price-li.on .icon-side-tick {
  display: block;
}
.page-client-vip-intro .introduction .price-li .tag-recom {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 18px;
  background: #eb533f;
  border-radius: 0 0 0 4px;
  text-align: center;
  line-height: 18px;
  font-size: 12px;
  color: #fff;
}
.page-client-vip-intro .introduction .fr-con .price-li.go-order {
  background: linear-gradient(6deg, #ffefe4, #fbefda);
  padding-top: 20px;
  font-size: 18px;
  color: #715244;
  border: 0;
}
.page-client-vip-intro .introduction .go-order .iconfont {
  font-size: 36px;
  background: linear-gradient(90deg, #cea488, #b98a74);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}
.page-client-vip-intro .introduction .fr-con .agreement {
  margin-top: 12px;
  text-align: left;
  font-size: 12px;
  color: #7a8596;
  cursor: pointer;
  position: relative;
  -webkit-app-region: no-drag;
}
.page-client-vip-intro .introduction .fr-con .agreement i {
  margin-right: 5px;
  font-size: 12px;
}
.page-client-vip-intro .introduction .fr-con .agreement:hover .pop {
  display: block;
}
.page-client-vip-intro .introduction .fr-con .agreement .pop {
  display: none;
  position: absolute;
  top: 23px;
  left: -18px;
  padding: 0 5px;
  background-color: #fff;
  border: 1px solid #eef0f2;
  border-radius: 4px;
  line-height: 23px;
  white-space: nowrap;
}
.page-client-vip-intro .introduction .fr-con .agreement .pop:before {
  position: absolute;
  content: '';
  top: -5px;
  left: 18px;
  width: 8px;
  height: 8px;
  background-color: #fff;
  transform: rotate(45deg);
  border-left: 1px solid #eef0f2;
  border-top: 1px solid #eef0f2;
  border-radius: 4px 0 0 0;
}
.page-client-vip-intro .introduction .agreement .pop i {
  font-size: 12px;
  color: #eb533f;
}
.page-client-vip-intro .introduction .fr-con .pay-money {
  margin: 22px 0 20px;
  line-height: 30px;
  font-size: 14px;
  color: #535e74;
  text-align: center;
  letter-spacing: 0.8px;
}
.page-client-vip-intro .introduction .fr-con .pay-money span {
  color: #eb533f;
}
.page-client-vip-intro .introduction .fr-con .pay-money b {
  color: #eb533f;
  font-size: 26px;
  font-weight: 400;
  vertical-align: -2px;
}
.page-client-vip-intro .introduction .fr-con .pay-box {
  text-align: center;
}
.page-client-vip-intro .introduction .fr-con .pb-li {
  display: inline-block;
  vertical-align: middle;
  width: 108px;
  height: 146px;
}
.page-client-vip-intro .introduction .fr-con .pb-li:first-of-type {
  margin-right: 70px;
}
.page-client-vip-intro .introduction .fr-con .weixin {
  width: 108px;
  height: 108px;
  border: 1px solid #50b325;
}
.page-client-vip-intro .introduction .fr-con .weixin img {
  width: 100%;
}
.page-client-vip-intro .introduction .fr-con .weixin-desc {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  color: #0f1d34;
}
.page-client-vip-intro .introduction .fr-con .weixin-desc i {
  margin-right: 8px;
  font-size: 14px;
  color: #50b326;
}
.page-client-vip-intro .introduction .fr-con .alipay {
  width: 108px;
  height: 108px;
  border: 1px solid #00a2ea;
  text-align: center;
  padding: 10px 23px;
}
.page-client-vip-intro .introduction .fr-con .alipay img {
  width: 100%;
}
.page-client-vip-intro .introduction .fr-con .alipay-desc {
  margin-top: 10px;
  width: 108px;
  height: 28px;
  background: #00a4f0;
  text-align: center;
  line-height: 28px;
  font-size: 14px;
  color: #fff;
}
.page-client-vip-intro .introduction .pay-success-pop {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -50%);
  width: 340px;
  height: 194px;
  background: #fff;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
}
.page-client-vip-intro .introduction .pay-success-pop .title {
  padding-top: 33px;
  line-height: 28px;
  font-size: 18px;
  color: #171e34;
}
.page-client-vip-intro .introduction .pay-success-pop .title i {
  margin-right: 8px;
  vertical-align: middle;
  font-size: 28px;
  background: linear-gradient(36deg, #25bf80, #3ece93);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-client-vip-intro .introduction .pay-success-pop .info {
  margin-top: 18px;
  line-height: 20px;
  font-size: 14px;
  color: #535d71;
}
.page-client-vip-intro .introduction .pay-success-pop .btn-submit {
  display: block;
  margin: 23px auto 0;
  width: 124px;
  height: 40px;
  background: #2d5eef;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
}
._page-client-vip-pay2 {
  position: relative;
  width: 858px;
  height: 615px;
  overflow: hidden;
}
._page-client-vip-pay2 .btn-close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  -webkit-app-region: no-drag;
}
._page-client-vip-pay2 .btn-close i {
  font-size: 14px;
  font-weight: 700;
  color: #7b8697;
}
._page-client-vip-pay2 .head {
  -webkit-app-region: drag;
  height: 64px;
  background: #212129;
  padding: 0 220px;
}
._page-client-vip-pay2 .head div {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
}
._page-client-vip-pay2 .head div .topRightTag {
  position: absolute;
  width: 35px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: linear-gradient(90deg, #f0a362, #ed6f4f);
  border-radius: 6px 0 6px 0;
  color: #fff;
  bottom: 30px;
  right: 234px;
}
._page-client-vip-pay2 .head img {
  -webkit-app-region: no-drag;
  cursor: pointer;
  width: 200px;
}
._page-client-vip-pay2 .user-info {
  -webkit-app-region: drag;
  position: absolute;
  left: 33px;
  top: 16px;
}
._page-client-vip-pay2 .user-info img {
  width: 38px;
  border-radius: 50%;
}
._page-client-vip-pay2 .user-info span {
  margin-left: 12px;
  color: #e6e4e0;
  display: inline-block;
  vertical-align: middle;
  line-height: 1.2;
}
._page-client-vip-pay2 .user-info span p:first-of-type {
  font-weight: 700;
}
._page-client-vip-pay2 .body {
  height: calc(100% - 64px);
}
._page-client-vip-pay2 .left {
  background: #f9fcff;
  width: 173px;
  height: 100%;
  display: inline-block;
  overflow: hidden;
  padding-top: 37px;
  text-align: center;
  vertical-align: top;
}
._page-client-vip-pay2 .left h4 {
  font-weight: 700;
  color: #11182e;
  font-size: 18px;
  margin-bottom: 9px;
}
._page-client-vip-pay2 .left > p {
  color: #535d71;
  font-size: 12px;
}
._page-client-vip-pay2 .left hr {
  width: 153px;
  margin: 27px auto 34px;
  border: none;
  border-bottom: 1px solid #e5ebf0;
}
._page-client-vip-pay2 .left div.intro {
  text-align: left;
  padding-left: 16px;
}
._page-client-vip-pay2 .left div.intro .intro-info {
  margin-bottom: 16px;
  font-size: 12px;
  color: #535d71;
  font-weight: 700;
}
._page-client-vip-pay2 .left div.intro .intro-info i {
  margin-right: 5px;
  font-size: 12px;
  color: #08a58f;
  font-weight: 700;
}
._page-client-vip-pay2 .left div.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 173px;
}
._page-client-vip-pay2 .left div.bottom button {
  width: 100px;
  height: 24px;
  line-height: 1em;
  border: 1px solid #d1d2d3;
  border-radius: 4px;
  color: #7a8596;
  font-size: 12px;
  margin-bottom: 20px;
}
._page-client-vip-pay2 .left div.bottom button:hover {
  color: #fff;
  background: #265eef;
  border-color: #265eef;
}
._page-client-vip-pay2 .left div.bottom p {
  font-size: 12px;
  color: #8493a7;
  margin-bottom: 13px;
}
._page-client-vip-pay2 .right {
  width: calc(100% - 173px);
  height: 100%;
  display: inline-block;
  overflow: hidden;
  padding: 18px 30px 0;
}
._page-client-vip-pay2 .right div.personal-slider {
  position: relative;
  text-align: center;
}
._page-client-vip-pay2 .right div.personal-slider div.slick-slide > div {
  padding-top: 8px;
}
._page-client-vip-pay2 .right div.personal-slider div.price-li {
  cursor: pointer;
  position: relative;
  width: 177px !important;
  margin: 0 auto;
  height: 120px;
  border-radius: 4px;
  border: 1px solid #eef0f2;
  text-align: center;
}
._page-client-vip-pay2 .right div.personal-slider div.price-li h5 {
  color: #202937;
  margin-top: 12px;
}
._page-client-vip-pay2 .right div.personal-slider div.price-li hr {
  width: 160px;
  margin: 9px auto 15px;
  border: none;
  border-bottom: 1px dashed #eef0f2;
}
._page-client-vip-pay2 .right div.personal-slider div.price-li span.price {
  font-weight: 700;
  font-size: 16px;
  color: #b49580;
}
._page-client-vip-pay2 .right div.personal-slider div.price-li span.price span {
  font-size: 28px;
}
._page-client-vip-pay2 .right div.personal-slider div.price-li span.each {
  margin-left: 5px;
  font-size: 12px;
  color: #8493a7;
}
._page-client-vip-pay2 .right div.personal-slider div.price-li p {
  margin-top: 16px;
  color: #ee663f;
  font-size: 12px;
}
._page-client-vip-pay2 .right div.personal-slider div.price-li.on {
  background: linear-gradient(119deg, #fefaf5, #f9f0e9);
  border-color: #d4704a;
}
._page-client-vip-pay2 .right div.personal-slider div.price-li.on h5 {
  color: #a55e42;
}
._page-client-vip-pay2 .right div.personal-slider div.price-li.on hr {
  border-color: #e8dbd1;
}
._page-client-vip-pay2 .right div.personal-slider div.price-li.on span.price {
  color: #a55e42;
}
._page-client-vip-pay2
  .right
  div.personal-slider
  div.price-li.on
  span.price
  span {
  color: #c24d1e;
}
._page-client-vip-pay2 .right div.personal-slider div.price-li.on span.each {
  color: #b1957d;
}
._page-client-vip-pay2 .right div.personal-slider div.continue-info {
  margin-top: 17px;
  text-align: left;
  font-size: 12px;
  color: #535d71;
}
._page-client-vip-pay2
  .right
  div.personal-slider
  div.continue-info
  span:last-of-type {
  position: relative;
  margin-left: 9px;
  cursor: pointer;
  border-radius: 50%;
  background: #7a8596;
  width: 16px;
  height: 15px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
._page-client-vip-pay2
  .right
  div.personal-slider
  div.continue-info
  span:last-of-type
  i {
  font-size: 12px;
  color: #fff;
  line-height: 15px;
}
._page-client-vip-pay2
  .right
  div.personal-slider
  div.continue-info
  span:last-of-type
  div {
  display: none;
  position: absolute;
  top: 20px;
  left: -130px;
  border: 1px solid #eef0f2;
  padding: 12px;
  line-height: 21px;
  color: #535d71;
  font-size: 12px;
  width: 260px;
  text-align: left;
  background: #fff !important;
  z-index: 999;
}
._page-client-vip-pay2
  .right
  div.personal-slider
  div.continue-info
  span:last-of-type:hover {
  background: #fff;
}
._page-client-vip-pay2
  .right
  div.personal-slider
  div.continue-info
  span:last-of-type:hover
  i {
  color: #265eef;
  font-size: 15px;
}
._page-client-vip-pay2
  .right
  div.personal-slider
  div.continue-info
  span:last-of-type:hover
  div {
  display: unset;
}
._page-client-vip-pay2 .right div.team-slider {
  position: relative;
}
._page-client-vip-pay2 .right div.team-slider div.slick-slide > div {
  padding-top: 8px;
}
._page-client-vip-pay2 .right div.team-slider div.price-li {
  cursor: pointer;
  position: relative;
  width: 177px !important;
  margin: 0 auto;
  height: 96px;
  border-radius: 4px;
  border: 1px solid #eef0f2;
  padding-top: 20px;
  padding-left: 30px;
}
._page-client-vip-pay2 .right div.team-slider div.price-li p:first-of-type {
  color: #202937;
  margin-bottom: 11px;
}
._page-client-vip-pay2 .right div.team-slider div.price-li p:last-of-type {
  font-weight: 700;
  font-size: 16px;
  color: #b49580;
}
._page-client-vip-pay2 .right div.team-slider div.price-li p:last-of-type b {
  font-size: 28px;
}
._page-client-vip-pay2 .right div.team-slider div.price-li p:last-of-type span {
  font-size: 14px;
}
._page-client-vip-pay2 .right div.team-slider div.price-li.on {
  border-color: #f2bd17;
  background: linear-gradient(304deg, #fffef6, #fefaea);
}
._page-client-vip-pay2 .right div.team-slider div.price-li.on p:first-of-type,
._page-client-vip-pay2 .right div.team-slider div.price-li.on p:last-of-type {
  color: #a55e42;
}
._page-client-vip-pay2 .right div.team-slider div.price-li.on p:last-of-type b,
._page-client-vip-pay2
  .right
  div.team-slider
  div.price-li.on
  p:last-of-type
  span {
  color: #c24d1e;
}
._page-client-vip-pay2 .right div.team-slider div.amount-select {
  margin-top: 25px;
  display: flex;
  justify-content: start;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #7a8596;
  -webkit-app-region: no-drag;
}
._page-client-vip-pay2 .right div.team-slider div.amount-select .btn {
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #eef0f2;
  text-align: center;
  line-height: 18px;
  font-size: 14px;
  color: #0f1d34;
}
._page-client-vip-pay2 .right div.team-slider div.amount-select .btn:hover {
  border-color: #0058ff;
  background-color: #0058ff;
  color: #fff;
}
._page-client-vip-pay2 .right div.team-slider div.amount-select .amount-input {
  width: 56px;
  height: 100%;
  margin: 0 12px;
  position: relative;
}
._page-client-vip-pay2
  .right
  div.team-slider
  div.amount-select
  .amount-input
  input {
  display: block;
  width: 100%;
  height: 20px;
  border: 1px solid #eef0f2;
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
  color: #0f1d34;
}
._page-client-vip-pay2
  .right
  div.team-slider
  div.amount-select
  .amount-input
  .tip-pop {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  padding: 0 5px;
  line-height: 18px;
  border: 1px solid #0058ff;
  border-radius: 2px;
  font-size: 12px;
  color: #0058ff;
  white-space: nowrap;
}
._page-client-vip-pay2
  .right
  div.team-slider
  div.amount-select
  .amount-input
  .tip-pop:before {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 50%;
  margin-left: -3px;
  width: 6px;
  height: 6px;
  background-color: #fff;
  border-right: 1px solid #0058ff;
  border-bottom: 1px solid #0058ff;
  border-radius: 0 0 2px 0;
  transform: rotate(45deg);
}
._page-client-vip-pay2 .right div.team-slider div.amount-select .other {
  margin-left: 10px;
}
._page-client-vip-pay2 .right div.team-slider div.amount-select .other b {
  color: #de3b0d;
  margin: 0 4px;
}
._page-client-vip-pay2 .right div.non-slider div.price-li span.price,
._page-client-vip-pay2 .right div.non-slider div.price-li span.price span {
  color: #3f66ca;
}
._page-client-vip-pay2 .right div.non-slider div.price-li.on {
  background: linear-gradient(
    112deg,
    rgba(223, 232, 255, 0.18),
    rgba(172, 195, 255, 0.17)
  );
  border-radius: 4px;
  border: 1px solid #3f66ca;
}
._page-client-vip-pay2 .right div.non-slider div.price-li.on h5 {
  color: #3f66ca;
}
._page-client-vip-pay2 .right div.non-slider div.price-li.on hr {
  border-color: #cad9ff;
}
._page-client-vip-pay2 .right div.non-slider div.price-li.on span.price,
._page-client-vip-pay2 .right div.non-slider div.price-li.on span.price span {
  color: #3f66ca;
}
._page-client-vip-pay2 .right div.non-slider div.price-li.on span.each {
  color: #ee663f;
}
._page-client-vip-pay2 .right div.personal-slider em.tag,
._page-client-vip-pay2 .right div.team-slider em.tag {
  position: absolute;
  right: -1px;
  top: -8px;
  background: linear-gradient(90deg, #f0a362, #ed6f4f);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 0 6px;
  height: 18px;
  line-height: 18px;
  border-radius: 6px 0 6px 0;
  text-align: center;
}
._page-client-vip-pay2 .right div.personal-slider em.tag.red,
._page-client-vip-pay2 .right div.team-slider em.tag.red {
  background: linear-gradient(90deg, #eb5365, #ff7e6b);
}
._page-client-vip-pay2 .right div.personal-slider em.tag .icon-wenhao1,
._page-client-vip-pay2 .right div.team-slider em.tag .icon-wenhao1 {
  font-size: 12px;
  margin-left: 4px;
}
._page-client-vip-pay2 .right div.personal-slider button.btn-prev,
._page-client-vip-pay2 .right div.team-slider button.btn-prev {
  left: 10px;
}
._page-client-vip-pay2 .right div.personal-slider button.btn-next:hover,
._page-client-vip-pay2 .right div.personal-slider button.btn-prev:hover,
._page-client-vip-pay2 .right div.team-slider button.btn-next:hover,
._page-client-vip-pay2 .right div.team-slider button.btn-prev:hover {
  color: #553a27;
  background: linear-gradient(119deg, #f8e8d7, #e7c0a4);
}
._page-client-vip-pay2 .right div.custom-list {
  margin-top: 23px;
  position: relative;
}
._page-client-vip-pay2 .right div.custom-list > p {
  font-size: 12px;
  color: #7a8596;
  margin-bottom: 9px;
}
._page-client-vip-pay2 .right div.custom-list .coupon-box {
  width: 100%;
  overflow: hidden;
  padding: 0 6px;
}
._page-client-vip-pay2 .right div.custom-list .coupon-list {
  transition: 0.3s;
  display: flex;
  padding-left: 203px;
  transform: translateX(-202px);
}
._page-client-vip-pay2 .right div.custom-list .coupon {
  user-select: none;
  margin-right: 16px;
  height: 45px;
  border-radius: 4px;
  border: 1px solid #e8e9e8;
  background: #fcfcfc;
  position: relative;
  padding-left: 6px;
  display: flex;
  cursor: pointer;
}
._page-client-vip-pay2 .right div.custom-list .coupon:before {
  position: absolute;
  content: '';
  width: 10px;
  height: 45px;
  top: -1px;
  left: 56px;
  background: url(https://pic.51ifonts.com/images/client/vip/pay/coupon-gray.jpg)
    no-repeat 50%;
  background-size: 100% auto;
}
._page-client-vip-pay2 .right div.custom-list .coupon.able:before {
  background: url(https://pic.51ifonts.com/images/client/vip/pay/coupon.jpg)
    no-repeat 50%;
  background-size: 100% auto;
}
._page-client-vip-pay2 .right div.custom-list .coupon.able {
  border-color: #e9cbc7;
  background: rgba(238, 102, 63, 0.06);
}
._page-client-vip-pay2 .right div.custom-list .coupon .status {
  position: absolute;
  top: 13px;
  left: -8px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #cfd2d7;
  background: #fff;
  text-align: center;
  line-height: 13px;
}
._page-client-vip-pay2 .right div.custom-list .coupon .status .iconfont {
  font-size: 14px;
  color: #cfd2d7;
}
._page-client-vip-pay2 .right div.custom-list .coupon .status .icon-disable,
._page-client-vip-pay2 .right div.custom-list .coupon .status .icon-tick {
  display: none;
}
._page-client-vip-pay2 .right div.custom-list .coupon.able .status {
  background-image: linear-gradient(180deg, #f89f73 0, #ee663f);
  border: none;
  line-height: 15px;
}
._page-client-vip-pay2 .right div.custom-list .coupon.able .status .iconfont {
  font-size: 12px;
  color: #fff;
}
._page-client-vip-pay2
  .right
  div.custom-list
  .coupon.able
  .status
  .icon-disable {
  display: none;
}
._page-client-vip-pay2 .right div.custom-list .coupon.able .status .icon-tick {
  display: inline;
}
._page-client-vip-pay2 .right div.custom-list .coupon.disable .status {
  border: none;
  line-height: 15px;
}
._page-client-vip-pay2
  .right
  div.custom-list
  .coupon.disable
  .status
  .icon-disable {
  display: inline;
}
._page-client-vip-pay2
  .right
  div.custom-list
  .coupon.disable
  .status
  .icon-tick {
  display: none;
}
._page-client-vip-pay2 .right div.custom-list .coupon .cn-fl {
  width: 50px;
  height: 100%;
  text-align: center;
}
._page-client-vip-pay2 .right div.custom-list .coupon .cn-fl .price {
  padding: 4px 0 2px;
  font-size: 14px;
  color: #101d34;
}
._page-client-vip-pay2 .right div.custom-list .coupon .cn-fl .price b {
  font-size: 20px;
  color: #ee663f;
}
._page-client-vip-pay2 .right div.custom-list .coupon .cn-fl .price + p {
  letter-spacing: 0;
  font-size: 12px;
  color: #8493a7;
  font-weight: 300;
  padding-left: 6px;
}
._page-client-vip-pay2 .right div.custom-list .coupon.able .cn-fl .price,
._page-client-vip-pay2 .right div.custom-list .coupon.able .cn-fl .price + p {
  color: #ee673f;
}
._page-client-vip-pay2 .right div.custom-list .coupon .cn-fr {
  margin-left: 10px;
  width: calc(100% - 48px);
  padding-left: 6px;
  padding-right: 4px;
  text-align: left;
  font-size: 12px;
}
._page-client-vip-pay2 .right div.custom-list .coupon .cn-fr .conditions {
  padding: 8px 0 5px;
  color: #101d34;
}
._page-client-vip-pay2 .right div.custom-list .coupon .cn-fr .expire {
  color: #8493a7;
  white-space: nowrap;
}
._page-client-vip-pay2 .right div.custom-list .coupon.able .cn-fr .conditions,
._page-client-vip-pay2 .right div.custom-list .coupon.able .cn-fr .expire {
  color: #ee663f;
}
._page-client-vip-pay2 .right div.custom-list .coupon.disable .cn-fl .price,
._page-client-vip-pay2 .right div.custom-list .coupon.disable .cn-fl .price + p,
._page-client-vip-pay2 .right div.custom-list .coupon.disable .cn-fl .price b,
._page-client-vip-pay2
  .right
  div.custom-list
  .coupon.disable
  .cn-fr
  .conditions,
._page-client-vip-pay2 .right div.custom-list .coupon.disable .cn-fr .expire {
  color: #cfd2d7;
}
._page-client-vip-pay2 .right div.agreement {
  display: inline-block;
  margin-top: 18px;
  text-align: left;
  font-size: 12px;
  color: #7a8596;
  cursor: pointer;
  position: relative;
}
._page-client-vip-pay2 .right div.agreement i {
  margin-right: 5px;
  font-size: 12px;
}
._page-client-vip-pay2 .right div.agreement .go-license {
  cursor: pointer;
}
._page-client-vip-pay2 .right div.agreement .go-license:hover {
  color: #0058ff;
}
._page-client-vip-pay2 .right div.agreement .pop {
  display: none;
  position: absolute;
  top: 20px;
  left: 0;
  padding: 0 5px;
  background-color: #fff;
  border: 1px solid #eef0f2;
  border-radius: 4px;
  line-height: 23px;
  white-space: nowrap;
  z-index: 999;
}
._page-client-vip-pay2 .right div.agreement .pop i {
  font-size: 12px;
  color: #eb533f;
}
._page-client-vip-pay2 .right div.agreement .pop:before {
  position: absolute;
  content: '';
  top: -5px;
  left: 18px;
  width: 8px;
  height: 8px;
  background-color: #fff;
  transform: rotate(45deg);
  border-left: 1px solid #eef0f2;
  border-top: 1px solid #eef0f2;
  border-radius: 0 0 4px 0;
}
._page-client-vip-pay2 .right div.agreement:hover .pop {
  display: block;
}
._page-client-vip-pay2 .right div.pay-box {
  text-align: center;
  transition: 0.3s;
}
._page-client-vip-pay2 .right div.pay-box.hidden {
  opacity: 0;
  pointer-events: none;
}
._page-client-vip-pay2 .right div.pay-box .pay-money.sm {
  margin: 10px 0 27px;
}
._page-client-vip-pay2 .right div.pay-box .pay-money {
  margin: 32px 0;
  line-height: 30px;
  font-size: 12px;
  color: #74859a;
  text-align: center;
  letter-spacing: 0.8px;
}
._page-client-vip-pay2 .right div.pay-box .pay-money span {
  color: #c24d1e;
  font-size: 14px;
}
._page-client-vip-pay2 .right div.pay-box .pay-money b {
  color: #c24d1e;
  font-size: 32px;
  vertical-align: -2px;
  font-weight: 700;
}
._page-client-vip-pay2 .right div.pay-box .pay-money .original {
  margin-left: 5px;
  font-size: 14px;
}
._page-client-vip-pay2 .right div.pay-box .pay-money .save {
  font-size: 12px;
  color: #cfd2d7;
}
._page-client-vip-pay2 .right div.pay-box .pay-money .save b {
  color: #ee663f;
  font-size: 12px;
  vertical-align: 0;
}
._page-client-vip-pay2 .right div.pay-box .pay-way {
  position: relative;
}
._page-client-vip-pay2 .right div.pay-box .pay-way .payment {
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 100%;
  margin-bottom: 18px;
  display: flex;
  justify-content: start;
  line-height: 24px;
  border-radius: 2px;
  font-size: 12px;
  color: #7a8596;
}
._page-client-vip-pay2 .right div.pay-box .pay-way .payment .btn {
  margin-right: 18px;
  padding: 0 12px;
  line-height: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 4px;
  font-size: 12px;
  color: #b1bbc7;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.3s;
}
._page-client-vip-pay2 .right div.pay-box .pay-way .payment .btn.on,
._page-client-vip-pay2 .right div.pay-box .pay-way .payment .btn:hover {
  color: #0058ff;
  background-color: #eef0f2;
}
._page-client-vip-pay2 .right div.pay-box .pb-li {
  display: inline-block;
  vertical-align: top;
}
._page-client-vip-pay2 .right div.pay-box .pb-li.wx {
  margin-right: 70px;
}
._page-client-vip-pay2 .right div.pay-box .weixin {
  border: 1px solid #50b325;
  padding: 8px;
}
._page-client-vip-pay2 .right div.pay-box .weixin canvas,
._page-client-vip-pay2 .right div.pay-box .weixin img {
  width: 100px;
}
._page-client-vip-pay2 .right div.pay-box .weixin-desc {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  color: #0f1d34;
  font-weight: 700;
}
._page-client-vip-pay2 .right div.pay-box .weixin-desc i {
  margin-right: 8px;
  font-size: 14px;
  color: #50b326;
}
._page-client-vip-pay2 .right div.pay-box .alipay {
  border: 1px solid #00a2ea;
  text-align: center;
  padding: 8px;
}
._page-client-vip-pay2 .right div.pay-box .alipay canvas,
._page-client-vip-pay2 .right div.pay-box .alipay img {
  width: 100px;
}
._page-client-vip-pay2 .right div.pay-box .alipay-desc {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: #0f1d34;
  font-weight: 700;
  line-height: 1.2;
}
._page-client-vip-pay2 .right div.pay-box .alipay-desc i {
  margin-right: 8px;
  font-size: 14px;
  color: #00a2ea;
}
._page-client-vip-pay2 .pay-success-pop {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -50%);
  width: 340px;
  height: 194px;
  background: #fff;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
}
._page-client-vip-pay2 .pay-success-pop .title {
  padding-top: 33px;
  line-height: 28px;
  font-size: 18px;
  color: #171e34;
}
._page-client-vip-pay2 .pay-success-pop .title i {
  margin-right: 8px;
  vertical-align: middle;
  font-size: 28px;
  background: linear-gradient(36deg, #25bf80, #3ece93);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
._page-client-vip-pay2 .pay-success-pop .info {
  margin-top: 18px;
  line-height: 20px;
  font-size: 14px;
  color: #535d71;
}
._page-client-vip-pay2 .pay-success-pop .btn-submit {
  display: block;
  margin: 23px auto 0;
  width: 124px;
  height: 40px;
  background: #2d5eef;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  -webkit-app-region: no-drag;
}
._page-client-vip-pay2 .alert-coupon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -50%);
  width: 386px;
  text-align: center;
  padding: 30px 0 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
}
._page-client-vip-pay2 .alert-coupon h4 {
  color: #202937;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}
._page-client-vip-pay2 .alert-coupon p {
  color: #535d71;
}
._page-client-vip-pay2 .alert-coupon .btn-submit {
  display: block;
  margin: 37px auto 8px;
  width: 243px;
  height: 40px;
  background: #2d5eef;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  -webkit-app-region: no-drag;
}
._page-client-vip-pay2 .alert-coupon a {
  font-size: 12px;
  color: #abb5c1;
  cursor: pointer;
}
._page-client-vip-pay2 .alert-coupon .coupon-img-div {
  margin: 20px auto -10px;
  padding-top: 29px;
  width: 258px;
  height: 93px;
  background: url(https://pic.51ifonts.com/images/client/vip/pay/grant-coupon.png)
    no-repeat 50%;
  background-size: 100% auto;
}
._page-client-vip-pay2 .alert-coupon .coupon-img-div p:first-of-type {
  font-weight: 700;
  font-size: 18px;
  color: #ee663f;
  letter-spacing: 1px;
}
._page-client-vip-pay2 .alert-coupon .coupon-img-div p:last-of-type {
  margin-top: 8px;
  font-size: 12px;
  color: #202937;
}
.tooltip-title {
  position: relative;
}
.tooltip-title-pop {
  left: 20px;
  top: 0;
  width: 242px;
  background: #fff;
  font-size: 12px;
  font-weight: 400;
  color: #798596;
  line-height: 17px;
  border-radius: 4px;
}
.tooltip-title-pop > p:not(:last-child) {
  margin-bottom: 12px;
}
.tooltip-title-pop > p:last-child {
  margin-bottom: 12px;
  color: #ff8c6b;
}
._page-client-vip-pay3 {
  position: relative;
  width: 858px;
  height: 615px;
  overflow: hidden;
}
._page-client-vip-pay3 .btn-close {
  position: fixed;
  top: 10px;
  right: 10px;
  cursor: pointer;
  -webkit-app-region: no-drag;
  z-index: 1999;
  line-height: 1;
}
._page-client-vip-pay3 .btn-close i {
  font-size: 14px;
  font-weight: 700;
  color: #7b8697;
}
._page-client-vip-pay3 .left {
  width: 180px;
  display: inline-block;
  height: 100%;
  vertical-align: top;
  text-align: center;
}
._page-client-vip-pay3 .left img {
  width: 27px;
  margin-top: 22px;
  margin-bottom: 8px;
}
._page-client-vip-pay3 .left > p {
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 20px;
}
._page-client-vip-pay3 .left div {
  margin-top: 50px;
  text-align: left;
  padding-left: 11px;
}
._page-client-vip-pay3 .left div p {
  font-weight: 500;
  font-size: 12px;
  margin-bottom: 4px;
}
._page-client-vip-pay3 .left div ul {
  margin-bottom: 23px;
}
._page-client-vip-pay3 .left div li {
  list-style: none;
  line-height: 24px;
  font-size: 12px;
  font-weight: 400;
}
._page-client-vip-pay3 .left.personal {
  background: linear-gradient(
    270deg,
    rgba(58, 127, 255, 0.14),
    rgba(39, 90, 240, 0.14)
  );
}
._page-client-vip-pay3 .left.personal > p {
  color: #11182e;
}
._page-client-vip-pay3 .left.personal div p {
  color: #535d71;
}
._page-client-vip-pay3 .left.personal div li {
  color: #8793ab;
}
._page-client-vip-pay3 .left.team {
  background: linear-gradient(127deg, #fffcef, #ffeed2);
}
._page-client-vip-pay3 .left.team > p,
._page-client-vip-pay3 .left.team div p {
  color: #7d5922;
}
._page-client-vip-pay3 .left.team div li {
  color: #ac915f;
}
._page-client-vip-pay3 .right {
  width: 678px;
  display: inline-block;
  height: 100%;
  vertical-align: top;
}
._page-client-vip-pay3 .head {
  -webkit-app-region: drag;
  height: 49px;
  line-height: 49px;
  padding: 0 17px;
  background: rgba(236, 238, 242, 0.45);
}
._page-client-vip-pay3 .head img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
._page-client-vip-pay3 .head span:first-of-type {
  margin-left: 14px;
  color: #535d71;
  font-weight: 500;
}
._page-client-vip-pay3 .head span:last-of-type {
  color: #535d71;
  margin-left: 5px;
}
._page-client-vip-pay3 .tab {
  height: 63px;
  border-bottom: 1px solid #e9eaec;
  text-align: center;
}
._page-client-vip-pay3 .tab div {
  display: inline-block;
  height: 100%;
  width: 110px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  margin: 0 50px;
  position: relative;
}
._page-client-vip-pay3 .tab div h5 {
  font-weight: 700;
  color: #9da3ac;
  font-size: 16px;
  margin-top: 14px;
  margin-bottom: 8px;
}
._page-client-vip-pay3 .tab div p {
  font-weight: 700;
  font-size: 12px;
  color: #9da3ac;
}
._page-client-vip-pay3 .tab div.active h5 {
  color: #11182e;
}
._page-client-vip-pay3 .tab div.active p {
  color: #535d71;
}
._page-client-vip-pay3 .tab div.active:before {
  width: 71px;
  height: 3px;
  background: #2254f4;
  position: absolute;
  left: 20px;
  bottom: 0;
  content: '';
}
._page-client-vip-pay3 div.body {
  padding: 33px 29px 0;
}
._page-client-vip-pay3 div.personal-slider {
  position: relative;
  text-align: center;
}
._page-client-vip-pay3 div.personal-slider div.slick-slide > div {
  padding-top: 8px;
}
._page-client-vip-pay3 div.personal-slider div.price-li {
  cursor: pointer;
  position: relative;
  width: 177px !important;
  margin: 0 auto;
  height: 120px;
  border-radius: 4px;
  border: 1px solid #eef0f2;
  text-align: center;
}
._page-client-vip-pay3 div.personal-slider div.price-li h5 {
  color: #202937;
  margin-top: 12px;
  font-size: 15px;
}
._page-client-vip-pay3 div.personal-slider div.price-li hr {
  width: 160px;
  margin: 9px auto 15px;
  border: none;
  border-bottom: 1px dashed #eef0f2;
}
._page-client-vip-pay3 div.personal-slider div.price-li span.price {
  font-weight: 700;
  font-size: 16px;
  color: #535d71;
}
._page-client-vip-pay3 div.personal-slider div.price-li span.price span {
  font-size: 28px;
}
._page-client-vip-pay3 div.personal-slider div.price-li span.each {
  margin-left: 5px;
  font-size: 12px;
  color: #8493a7;
}
._page-client-vip-pay3 div.personal-slider div.price-li p {
  margin-top: 16px;
  color: #ee663f;
  font-size: 12px;
}
._page-client-vip-pay3 div.personal-slider div.price-li.on {
  background: linear-gradient(119deg, #fefaf5, #f9f0e9);
  border-color: #d4704a;
}
._page-client-vip-pay3 div.personal-slider div.price-li.on h5 {
  color: #a55e42;
}
._page-client-vip-pay3 div.personal-slider div.price-li.on hr {
  border-color: #e8dbd1;
}
._page-client-vip-pay3 div.personal-slider div.price-li.on span.price {
  color: #a55e42;
}
._page-client-vip-pay3 div.personal-slider div.price-li.on span.price span {
  color: #c24d1e;
}
._page-client-vip-pay3 div.personal-slider div.price-li.on span.each {
  color: #b1957d;
}
._page-client-vip-pay3 div.personal-slider div.continue-info {
  margin-top: 17px;
  text-align: left;
  font-size: 12px;
  color: #535d71;
}
._page-client-vip-pay3 div.personal-slider div.continue-info span:last-of-type {
  position: relative;
  margin-left: 9px;
  cursor: pointer;
  border-radius: 50%;
  background: #7a8596;
  width: 16px;
  height: 15px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
._page-client-vip-pay3
  div.personal-slider
  div.continue-info
  span:last-of-type
  i {
  font-size: 12px;
  color: #fff;
  line-height: 15px;
}
._page-client-vip-pay3
  div.personal-slider
  div.continue-info
  span:last-of-type
  div {
  display: none;
  position: absolute;
  top: 20px;
  left: -130px;
  border: 1px solid #eef0f2;
  padding: 12px;
  line-height: 21px;
  color: #535d71;
  font-size: 12px;
  width: 260px;
  text-align: left;
  background: #fff !important;
  z-index: 999;
}
._page-client-vip-pay3
  div.personal-slider
  div.continue-info
  span:last-of-type:hover {
  background: #fff;
}
._page-client-vip-pay3
  div.personal-slider
  div.continue-info
  span:last-of-type:hover
  i {
  color: #265eef;
  font-size: 15px;
}
._page-client-vip-pay3
  div.personal-slider
  div.continue-info
  span:last-of-type:hover
  div {
  display: unset;
}
._page-client-vip-pay3 div.team-slider {
  position: relative;
}
._page-client-vip-pay3 div.team-slider div.slick-slide > div {
  padding-top: 8px;
}
._page-client-vip-pay3 div.team-slider div.price-li {
  cursor: pointer;
  position: relative;
  width: 195px !important;
  margin: 0 auto;
  height: 100px !important;
  border-radius: 4px;
  border: 1px solid #eef0f2;
  padding-top: 20px;
  padding-left: 26px;
}
._page-client-vip-pay3 div.team-slider div.price-li p:first-of-type {
  color: #202937;
  margin-bottom: 11px;
}
._page-client-vip-pay3 div.team-slider div.price-li p:last-of-type {
  font-weight: 700;
  font-size: 16px;
  color: #b49580;
}
._page-client-vip-pay3 div.team-slider div.price-li p:last-of-type b {
  font-size: 28px;
}
._page-client-vip-pay3 div.team-slider div.price-li p:last-of-type span {
  font-size: 14px;
}
._page-client-vip-pay3 div.team-slider div.price-li.on {
  border-color: #f2bd17;
  background: linear-gradient(304deg, #fffef6, #fefaea);
}
._page-client-vip-pay3 div.team-slider div.price-li.on p:first-of-type,
._page-client-vip-pay3 div.team-slider div.price-li.on p:last-of-type {
  color: #a55e42;
}
._page-client-vip-pay3 div.team-slider div.price-li.on p:last-of-type b,
._page-client-vip-pay3 div.team-slider div.price-li.on p:last-of-type span {
  color: #c24d1e;
}
._page-client-vip-pay3 div.team-slider div.amount-select {
  margin-top: 25px;
  display: flex;
  justify-content: start;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #7a8596;
  -webkit-app-region: no-drag;
}
._page-client-vip-pay3 div.team-slider div.amount-select .btn {
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #eef0f2;
  text-align: center;
  line-height: 18px;
  font-size: 14px;
  color: #0f1d34;
}
._page-client-vip-pay3 div.team-slider div.amount-select .btn:hover {
  border-color: #0058ff;
  background-color: #0058ff;
  color: #fff;
}
._page-client-vip-pay3 div.team-slider div.amount-select .amount-input {
  width: 56px;
  height: 100%;
  margin: 0 12px;
  position: relative;
}
._page-client-vip-pay3 div.team-slider div.amount-select .amount-input input {
  display: block;
  width: 100%;
  height: 20px;
  border: 1px solid #eef0f2;
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
  color: #0f1d34;
}
._page-client-vip-pay3
  div.team-slider
  div.amount-select
  .amount-input
  .tip-pop {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  padding: 0 5px;
  line-height: 18px;
  border: 1px solid #0058ff;
  border-radius: 2px;
  font-size: 12px;
  color: #0058ff;
  white-space: nowrap;
}
._page-client-vip-pay3
  div.team-slider
  div.amount-select
  .amount-input
  .tip-pop:before {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 50%;
  margin-left: -3px;
  width: 6px;
  height: 6px;
  background-color: #fff;
  border-right: 1px solid #0058ff;
  border-bottom: 1px solid #0058ff;
  border-radius: 0 0 2px 0;
  transform: rotate(45deg);
}
._page-client-vip-pay3 div.team-slider div.amount-select .other {
  margin-left: 10px;
}
._page-client-vip-pay3 div.team-slider div.amount-select .other b {
  color: #de3b0d;
  margin: 0 4px;
}
._page-client-vip-pay3 div.personal-slider em.tag,
._page-client-vip-pay3 div.team-slider em.tag {
  position: absolute;
  right: -1px;
  top: -8px;
  background: linear-gradient(90deg, #f0a362, #ed6f4f);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 0 6px;
  height: 18px;
  line-height: 18px;
  border-radius: 6px 0 6px 0;
  text-align: center;
}
._page-client-vip-pay3 div.personal-slider em.tag.red,
._page-client-vip-pay3 div.team-slider em.tag.red {
  background: linear-gradient(90deg, #eb5365, #ff7e6b);
}
._page-client-vip-pay3 div.personal-slider button.btn-prev,
._page-client-vip-pay3 div.team-slider button.btn-prev {
  left: 10px;
}
._page-client-vip-pay3 div.personal-slider button.btn-next:hover,
._page-client-vip-pay3 div.personal-slider button.btn-prev:hover,
._page-client-vip-pay3 div.team-slider button.btn-next:hover,
._page-client-vip-pay3 div.team-slider button.btn-prev:hover {
  color: #553a27;
  background: linear-gradient(119deg, #f8e8d7, #e7c0a4);
}
._page-client-vip-pay3 div.personal-slider em.tag {
  left: -1px !important;
  right: unset;
}
._page-client-vip-pay3 div.custom-list {
  margin-top: 23px;
  position: relative;
}
._page-client-vip-pay3 div.custom-list > p {
  font-size: 12px;
  color: #7a8596;
  margin-bottom: 9px;
}
._page-client-vip-pay3 div.custom-list .coupon-box {
  width: 100%;
  overflow: hidden;
  padding: 0 6px;
}
._page-client-vip-pay3 div.custom-list .coupon-list {
  transition: 0.3s;
  display: flex;
  padding-left: 203px;
  transform: translateX(-202px);
}
._page-client-vip-pay3 div.custom-list .coupon {
  user-select: none;
  margin-right: 16px;
  height: 45px;
  border-radius: 4px;
  border: 1px solid #e8e9e8;
  background: #fcfcfc;
  position: relative;
  padding-left: 6px;
  display: flex;
  cursor: pointer;
}
._page-client-vip-pay3 div.custom-list .coupon:before {
  position: absolute;
  content: '';
  width: 10px;
  height: 45px;
  top: -1px;
  left: 56px;
  background: url(https://pic.51ifonts.com/images/client/vip/pay/coupon-gray.jpg)
    no-repeat 50%;
  background-size: 100% auto;
}
._page-client-vip-pay3 div.custom-list .coupon.able:before {
  background: url(https://pic.51ifonts.com/images/client/vip/pay/coupon.jpg)
    no-repeat 50%;
  background-size: 100% auto;
}
._page-client-vip-pay3 div.custom-list .coupon.able {
  border-color: #e9cbc7;
  background: rgba(238, 102, 63, 0.06);
}
._page-client-vip-pay3 div.custom-list .coupon .status {
  position: absolute;
  top: 13px;
  left: -8px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #cfd2d7;
  background: #fff;
  text-align: center;
  line-height: 13px;
}
._page-client-vip-pay3 div.custom-list .coupon .status .iconfont {
  font-size: 14px;
  color: #cfd2d7;
}
._page-client-vip-pay3 div.custom-list .coupon .status .icon-disable,
._page-client-vip-pay3 div.custom-list .coupon .status .icon-tick {
  display: none;
}
._page-client-vip-pay3 div.custom-list .coupon.able .status {
  background-image: linear-gradient(180deg, #f89f73 0, #ee663f);
  border: none;
  line-height: 15px;
}
._page-client-vip-pay3 div.custom-list .coupon.able .status .iconfont {
  font-size: 12px;
  color: #fff;
}
._page-client-vip-pay3 div.custom-list .coupon.able .status .icon-disable {
  display: none;
}
._page-client-vip-pay3 div.custom-list .coupon.able .status .icon-tick {
  display: inline;
}
._page-client-vip-pay3 div.custom-list .coupon.disable .status {
  border: none;
  line-height: 15px;
}
._page-client-vip-pay3 div.custom-list .coupon.disable .status .icon-disable {
  display: inline;
}
._page-client-vip-pay3 div.custom-list .coupon.disable .status .icon-tick {
  display: none;
}
._page-client-vip-pay3 div.custom-list .coupon .cn-fl {
  width: 50px;
  height: 100%;
  text-align: center;
}
._page-client-vip-pay3 div.custom-list .coupon .cn-fl .price {
  padding: 4px 0 2px;
  font-size: 14px;
  color: #101d34;
}
._page-client-vip-pay3 div.custom-list .coupon .cn-fl .price b {
  font-size: 20px;
  color: #ee663f;
}
._page-client-vip-pay3 div.custom-list .coupon .cn-fl .price + p {
  letter-spacing: 0;
  font-size: 12px;
  color: #8493a7;
  font-weight: 300;
  padding-left: 6px;
}
._page-client-vip-pay3 div.custom-list .coupon.able .cn-fl .price,
._page-client-vip-pay3 div.custom-list .coupon.able .cn-fl .price + p {
  color: #ee673f;
}
._page-client-vip-pay3 div.custom-list .coupon .cn-fr {
  margin-left: 10px;
  width: calc(100% - 48px);
  padding-left: 6px;
  padding-right: 4px;
  text-align: left;
  font-size: 12px;
}
._page-client-vip-pay3 div.custom-list .coupon .cn-fr .conditions {
  padding: 8px 0 5px;
  color: #101d34;
}
._page-client-vip-pay3 div.custom-list .coupon .cn-fr .expire {
  color: #8493a7;
  white-space: nowrap;
}
._page-client-vip-pay3 div.custom-list .coupon.able .cn-fr .conditions,
._page-client-vip-pay3 div.custom-list .coupon.able .cn-fr .expire {
  color: #ee663f;
}
._page-client-vip-pay3 div.custom-list .coupon.disable .cn-fl .price,
._page-client-vip-pay3 div.custom-list .coupon.disable .cn-fl .price + p,
._page-client-vip-pay3 div.custom-list .coupon.disable .cn-fl .price b,
._page-client-vip-pay3 div.custom-list .coupon.disable .cn-fr .conditions,
._page-client-vip-pay3 div.custom-list .coupon.disable .cn-fr .expire {
  color: #cfd2d7;
}
._page-client-vip-pay3 div.agreement {
  font-size: 12px;
  color: #7a8596;
  cursor: pointer;
  position: absolute;
  bottom: 10px;
}
._page-client-vip-pay3 div.agreement i {
  margin-right: 5px;
  font-size: 12px;
}
._page-client-vip-pay3 div.agreement .go-license {
  cursor: pointer;
}
._page-client-vip-pay3 div.agreement .go-license:hover {
  color: #0058ff;
}
._page-client-vip-pay3 div.agreement .pop {
  display: none;
  position: absolute;
  bottom: 20px;
  left: 0;
  padding: 0 5px;
  background-color: #fff;
  border: 1px solid #eef0f2;
  border-radius: 4px;
  line-height: 23px;
  white-space: nowrap;
  z-index: 999;
}
._page-client-vip-pay3 div.agreement .pop i {
  font-size: 12px;
  color: #eb533f;
}
._page-client-vip-pay3 div.agreement .pop:before {
  position: absolute;
  content: '';
  bottom: -5px;
  left: 18px;
  width: 8px;
  height: 8px;
  background-color: #fff;
  transform: rotate(45deg);
  border-right: 1px solid #eef0f2;
  border-bottom: 1px solid #eef0f2;
  border-radius: 0 0 4px 0;
}
._page-client-vip-pay3 div.agreement:hover .pop {
  display: block;
}
._page-client-vip-pay3 div.pay-box {
  text-align: center;
  transition: 0.3s;
}
._page-client-vip-pay3 div.pay-box.hidden {
  opacity: 0;
  pointer-events: none;
}
._page-client-vip-pay3 div.pay-box .pay-money.sm {
  margin: 10px 0 7px;
}
._page-client-vip-pay3 div.pay-box .pay-money {
  margin: 32px 0;
  line-height: 30px;
  font-size: 12px;
  color: #74859a;
  text-align: center;
  letter-spacing: 0.8px;
}
._page-client-vip-pay3 div.pay-box .pay-money span {
  color: #c24d1e;
  font-size: 14px;
}
._page-client-vip-pay3 div.pay-box .pay-money b {
  color: #c24d1e;
  font-size: 32px;
  vertical-align: -2px;
  font-weight: 700;
}
._page-client-vip-pay3 div.pay-box .pay-money .original {
  margin-left: 5px;
  font-size: 14px;
}
._page-client-vip-pay3 div.pay-box .pay-money .save {
  font-size: 12px;
  color: #cfd2d7;
}
._page-client-vip-pay3 div.pay-box .pay-money .save b {
  color: #ee663f;
  font-size: 12px;
  vertical-align: 0;
}
._page-client-vip-pay3 div.pay-box .pay-way {
  position: relative;
}
._page-client-vip-pay3 div.pay-box .pay-way .payment {
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 100%;
  margin-bottom: 18px;
  display: flex;
  justify-content: start;
  line-height: 24px;
  border-radius: 2px;
  font-size: 12px;
  color: #7a8596;
}
._page-client-vip-pay3 div.pay-box .pay-way .payment .btn {
  margin-right: 18px;
  padding: 0 12px;
  line-height: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 4px;
  font-size: 12px;
  color: #b1bbc7;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.3s;
}
._page-client-vip-pay3 div.pay-box .pay-way .payment .btn.on,
._page-client-vip-pay3 div.pay-box .pay-way .payment .btn:hover {
  color: #0058ff;
  background-color: #eef0f2;
}
._page-client-vip-pay3 div.pay-box .pb-li {
  display: inline-block;
  vertical-align: top;
}
._page-client-vip-pay3 div.pay-box .pb-li.wx {
  margin-right: 70px;
}
._page-client-vip-pay3 div.pay-box .weixin {
  border: 1px solid #50b325;
  padding: 8px;
}
._page-client-vip-pay3 div.pay-box .weixin canvas,
._page-client-vip-pay3 div.pay-box .weixin img {
  width: 100px;
}
._page-client-vip-pay3 div.pay-box .weixin-desc {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  color: #0f1d34;
  font-weight: 700;
}
._page-client-vip-pay3 div.pay-box .weixin-desc i {
  margin-right: 8px;
  font-size: 14px;
  color: #50b326;
}
._page-client-vip-pay3 div.pay-box .alipay {
  border: 1px solid #00a2ea;
  text-align: center;
  padding: 8px;
}
._page-client-vip-pay3 div.pay-box .alipay canvas,
._page-client-vip-pay3 div.pay-box .alipay img {
  width: 100px;
}
._page-client-vip-pay3 div.pay-box .alipay-desc {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: #0f1d34;
  font-weight: 700;
  line-height: 1.2;
}
._page-client-vip-pay3 div.pay-box .alipay-desc i {
  margin-right: 8px;
  font-size: 14px;
  color: #00a2ea;
}
._page-client-vip-pay3 .pay-success-pop {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -50%);
  width: 340px;
  height: 194px;
  background: #fff;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
}
._page-client-vip-pay3 .pay-success-pop .title {
  padding-top: 33px;
  line-height: 28px;
  font-size: 18px;
  color: #171e34;
}
._page-client-vip-pay3 .pay-success-pop .title i {
  margin-right: 8px;
  vertical-align: middle;
  font-size: 28px;
  background: linear-gradient(36deg, #25bf80, #3ece93);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
._page-client-vip-pay3 .pay-success-pop .info {
  margin-top: 18px;
  line-height: 20px;
  font-size: 14px;
  color: #535d71;
}
._page-client-vip-pay3 .pay-success-pop .btn-submit {
  display: block;
  margin: 23px auto 0;
  width: 124px;
  height: 40px;
  background: #2d5eef;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  -webkit-app-region: no-drag;
}
._page-client-vip-pay3 .alert-coupon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -50%);
  width: 386px;
  text-align: center;
  padding: 30px 0 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
}
._page-client-vip-pay3 .alert-coupon h4 {
  color: #202937;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}
._page-client-vip-pay3 .alert-coupon p {
  color: #535d71;
}
._page-client-vip-pay3 .alert-coupon .btn-submit {
  display: block;
  margin: 37px auto 8px;
  width: 243px;
  height: 40px;
  background: #2d5eef;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  -webkit-app-region: no-drag;
}
._page-client-vip-pay3 .alert-coupon a {
  font-size: 12px;
  color: #abb5c1;
  cursor: pointer;
}
._page-client-vip-pay3 .alert-coupon .coupon-img-div {
  margin: 20px auto -10px;
  padding-top: 29px;
  width: 258px;
  height: 93px;
  background: url(https://pic.51ifonts.com/images/client/vip/pay/grant-coupon.png)
    no-repeat 50%;
  background-size: 100% auto;
}
._page-client-vip-pay3 .alert-coupon .coupon-img-div p:first-of-type {
  font-weight: 700;
  font-size: 18px;
  color: #ee663f;
  letter-spacing: 1px;
}
._page-client-vip-pay3 .alert-coupon .coupon-img-div p:last-of-type {
  margin-top: 8px;
  font-size: 12px;
  color: #202937;
}
._page-client-vip-pay3 .timer {
  text-align: center;
  height: 32px;
  line-height: 32px;
  margin-top: 24px;
  margin-bottom: 20px;
  background: linear-gradient(
    270deg,
    rgba(248, 159, 115, 0.2),
    rgba(238, 102, 63, 0.09)
  );
  border-radius: 4px;
  font-size: 12px;
}
._page-client-vip-pay3 .timer span:first-of-type {
  color: #8d7267;
}
._page-client-vip-pay3 .timer span:last-of-type {
  color: #9d401a;
}
.list-wrap {
  padding: 50px;
  font-size: 16px;
}
